0

RSS feed形式の日付を含むサイトに を引っ張っていますdd/mm/yyyy (UK date format)。日付は でラップされてh3 tagsいます。元の日付を、それぞれ日付と月のみを含む 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.

4

1 に答える 1

3

h3すべてを置き換えるのではなく、現在の内容を置き換える必要があります

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

デモ:フィドル

より正確な修正

$(".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>';
})

デモ:フィドル

日時ライブラリmomentjsを含めることができる場合

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

デモ:フィドル

于 2013-06-12T09:04:19.100 に答える