Question

I want to take a string and wrap it in tags like this:

<!-- What I've got: -->    
<div class="calendar">Feb 22</div>

<!-- What I want:
<div class="calendar">
    <div class="calendarMonth">Feb</div>
    <div class="calendarDay">22</div>
    </div>
-->​

I tried to cook some jQuery, but I’m kind of stuck:

var calendarText = $(".calendar").html();
var calendarArray = calendarText.split(" ");
var calendarMonth = calendarArray[0];
var calendarDay = calendarArray[1];

/* 

Then I tried something like this:
calendarMonth.wrap("div").addClass("calendarMonth");

But I guess calendarMonth is just a string, not an object.

*/

​How would you go about something like this? Any ideas is highly appreciated.

JSFiddle example here: http://jsfiddle.net/timkl/u23wY/

Answer 1

You could do it like this:

$(function(){
   var calendarText = $(".calendar").html();
   var calendarArray = calendarText.split(" ");
   var calendarMonth = calendarArray[0];
   var calendarDay = calendarArray[1];

   var html = "<div class=\"calendarMonth\">"+calendarMonth+"</div>"+
           "<div class=\"calendarDay\">"+calendarDay+"</div>";

   $(".calendar").html(html);
});

Updated your fiddle: http://jsfiddle.net/u23wY/1/