Question

我正在使用带有以下标记的日历：http://jsfiddle.net/PHznZ/

使用jQuery，如何使用名为.start-week的包含元素将每周（星期日.end-week到星期六.full-week）换行？示例：http://jsfiddle.net/PHznZ/1/

以下是目标HTML代码：

<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>

Answer 1

使用

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

Answer 2

fiddle Demo

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

<小时/> 我很晚才回答：）

更短，更快版本的Roman回答。

将div从一个类包装到另一个类

2 个答案: