Question

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

原始输出是：

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

我想在跨度中包装YYYY，MM和DD，以便我可以将它们作为子节点进行操作。

结果将是：

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

我的每次尝试都会添加额外的标签，因此这是一个嵌套的混乱。

有人有一个很好的解决方案吗？

Answer 1

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

$('.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/

Answer 2

如果它总是具有相同的YYYY-MM-DD格式，那么您可以使用split来获取元素，循环遍历它们，创建输出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/

Answer 3

我认为应该这样做：

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>');

jQuery用博客日期标题替换连字符

3 个答案: