javascriptjqueryhtml

Wrap divs from one class to another


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>

Solution

  • In jQuery before 1.8

    use

    ​$(".start-week").each(function() {
        $(this).nextUntil('.end-week + *').andSelf().wrapAll('<div class="full-week">');
    });​​​​​​​​​​​
    

    In jQuery after 1.8 (especially after 3.0)

    use

    ​jQuery(".start-week").each(function() {
        jQuery(this).nextUntil('.end-week + *').addBack().wrapAll('<div class="full-week">');
    });​​​​​​​​​​​