javascript - 如何使用 Jquery 更改多个 div 中的日期格式？

Question

我正在将一个RSS feed拉到我的网站上，其中包含格式为dd/mm/yyyy(英国日期格式)的日期。日期包含在 h3 标签 中，我想用 2 个分别包含日期和月份的 div 替换原始日期。我已经成功实现了这一点，但每个实例的输出日期都是相同的。

如何替换每个 div 中的日期？我已经尝试了各种方法，但我无法完全弄清楚。毫无疑问，有一种更简单的方法可以做到这一点!非常感谢任何帮助。

HTML 是:

<div class='news'>
    <h2>Title</h2>
    <h3>11/06/2013</h3>
    <p>Content</p>
</div>
<div class='news'>
    <h2>Title</h2>
    <h3>07/06/2013</h3>
    <p>Content</p>
</div>

JavaScript 是:

var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
    "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]; // Define month names array

$(".news h3").each(function () {
    // Gets date and puts it in variable 'postDate'
    var postDate = $(this).html();
    // Reformats date into UK format after Javascript date object is created
    var d = new Date(postDate.split('/')[2], postDate.split('/')[1] - 1, postDate.split('/')[0]);

    $('.news h3').replaceWith('<div class="blogDate">' + d.getDate() +
        '</div><div class="blogMonth">' + monthNames[d.getMonth()] +
        '</div>'); //Replaces original date with newly created divs

});

我创建了一个 JSFiddle这样你就可以看到输出了。底部日期应为 7 Jun。

Answer 1

需要替换当前h3的内容，而不是全部替换

$(this).replaceWith('<div id="blogDate">' + d.getDate() + '</div><div id="blogMonth">' + monthNames[d.getMonth()] + '</div>');

演示:Fiddle

更正确的修复

$(".news h3").replaceWith(function(){
    var postDate = $(this).html();
    var parts = postDate.split('/');

    var d = new Date(parts[2], parts[1] - 1, parts[0]);

    return '<div id="blogDate">' + d.getDate() + '</div><div id="blogMonth">' + monthNames[d.getMonth()] + '</div>';
})

演示:Fiddle

如果您可以包含日期时间库 momentjs那么

$(".news h3").replaceWith(function(){
    var text = moment($.trim($(this).text()), "DD/MM/yyyy").format('D MMM');
    return '<div>' + text + '</div>';
})

演示:Fiddle