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

发布于 2024-12-09 04:51:48 字数 444 浏览 0 评论 0原文

我正在寻找使用 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>

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

有人有好的解决办法吗？

原文

I'm looking to customize the default date header in blogger with jQuery.

The original output is:

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

I want to wrap the YYYY, MM, and DD in spans so I can manipulate them as child nodes.

The result would be:

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

Each attempt of mine adds extra tags so it's a nested mess.

Anybody have a good solution?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

会傲 2024-12-16 04:51:48

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

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

Here's a nice functional solution:

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

回复收藏 0 原文

电影里的梦 2024-12-16 04:51:48

如果它始终具有相同的 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/

If it always has the same format of YYYY-MM-DD then you could use split to get the elements, loop through them, create your output HTML then add that as the HTML of the h2.

$(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);

   });

});

And a fiddle: http://jsfiddle.net/ahallicks/xGa2J/2/

回复收藏 0 原文

橙幽之幻 2024-12-16 04:51:48

我认为应该这样做：

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

I think this should do it:

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

回复收藏 0 原文

~没有更多了~