Reputation: 685
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>
Upvotes: 0
Views: 141
Reputation: 57105
$(".start-week").nextUntil('[class*="end-week"]').wrapAll('<div class="full-week">');
Shorter and Faster Version of Roman answer .
Upvotes: 1
Reputation: 6408
use
$(".start-week").each(function() {
$(this).nextUntil('.end-week + *').andSelf().wrapAll('<div class="full-week">');
});
Upvotes: 10