jQuery将博客日期头的连字符替换为span

jQuery replace hyphens with spans for blogger date header

本文关键字：连字符 替换 span 日期 jQuery      更新时间：2023-09-26

我希望在博客中使用jQuery自定义默认日期标题。

原始输出为:

<h2 class='date-header'>2011-01-20</h2>

我想把YYYY、MM和DD包装在span中，这样我就可以把它们作为子节点来操作。

结果将是:

<h2 class='date-header'><span class="dhy">2011</span><span class="dhm">01</span><span class="dhd">20</span></h2>

我的每次尝试都添加了额外的标签，所以它是一个嵌套的混乱。

谁有好的解决方案?

这是一个很好的功能性解决方案:

$('.date-header').html(function() {
    var txt = $(this).text();
    var classes = ['dhy', 'dhm', 'dhd'];
    $(this).html($.map(txt.split(/-/), function(val) {
        return $('<span/>', {'class': classes.shift()}).text(val)[0];
    }));
});
http://jsfiddle.net/ThiefMaster/WdRAw/

如果它总是具有相同的YYYY-MM-DD格式，那么您可以使用分割来获取元素，循环遍历它们，创建输出HTML，然后将其添加为h2的HTML。

$(function()
{
   $(".date-header").each(function()
   {
      var arrDate = $(this).text().split("-");
      var strOut = '<span class="dhy">'+arrDate[0]+'</span>-';
      strOut+= '<span class="dhm">'+arrDate[1]+'</span>-';
      strOut+= '<span class="dhd">'+arrDate[2]+'</span>';
      $(this).html(strOut);
   });
});

和小提琴:http://jsfiddle.net/ahallicks/xGa2J/2/

我想这个应该可以了:

var header = $('.date-header');
var d = header.text().split('-');
header.html('<span class="dhy">' + d[0] + '</span><span class="dhm">' + d[1] + '</span><span class="dhd">' + d[2] + '</span>');
相关文章：