ctrlaltdel
ctrlaltdel

Reputation: 685

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>

Upvotes: 0

Views: 141

Answers (2)

fiddle Demo

$(".start-week").nextUntil('[class*="end-week"]').wrapAll('<div class="full-week">');


I'm very late to answer :)

Shorter and Faster Version of Roman answer .

Upvotes: 1

Roman
Roman

Reputation: 6408

use

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

Upvotes: 10

Related Questions