0

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

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

这是目标 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>
4

2 回答 2

10

采用

​$(".start-week").each(function() {
    $(this).nextUntil('.end-week + *').andSelf().wrapAll('<div class="full-week">');
});​​​​​​​​​​​
于 2012-07-09T15:44:06.697 回答
1

fiddle Demo

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

我很晚才回答:)

罗马答案的更短和更快的版本。

于 2013-11-23T13:52:52.700 回答