Question

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?

Answer 1

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/