I'm working with a calendar with the following markup: http://jsfiddle.net/PHznZ/
Using jQuery, how can I wrap each week (Sunday .start-week
through Saturday .end-week
) with a containing element called .full-week
? Example: http://jsfiddle.net/PHznZ/1/
Here's the targeted HTML code:
<div id="calendar">
<article class="day start-week">
<span class="dayname">Sunday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Monday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Tuesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Wednesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Thursday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Friday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day end-week">
<span class="dayname">Saturday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day start-week">
<span class="dayname">Sunday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Monday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Tuesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Wednesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Thursday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Friday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day end-week">
<span class="dayname">Saturday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day start-week">
<span class="dayname">Sunday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Monday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Tuesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Wednesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Thursday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Friday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day end-week">
<span class="dayname">Saturday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day start-week">
<span class="dayname">Sunday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Monday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Tuesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Wednesday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Thursday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day">
<span class="dayname">Friday</span>
<p>Lorem ipsum...</p>
</article>
<article class="day end-week">
<span class="dayname">Saturday</span>
<p>Lorem ipsum...</p>
</article>
</div>
use
$(".start-week").each(function() {
$(this).nextUntil('.end-week + *').andSelf().wrapAll('<div class="full-week">');
});
use
jQuery(".start-week").each(function() {
jQuery(this).nextUntil('.end-week + *').addBack().wrapAll('<div class="full-week">');
});