Question

我有以下结构，一个外部div（#results）和大约20个带有类事件的div。我想对每3个事件进行分组，并在它们周围包装一个名为outer的div，

<div id="result">

    <div class="event">
        <div class="date">8 April</div> 
            <div class="eventname">my title</div>
            <div class="link">my link goes here</div>
    </div>

// lots more events here
</div>

Answer 1

尝试：

while ($('#result > .event').length > 0) {
    $('#result > .event:lt(3)').wrapAll('<div class="wrap"></div>')
}

http://jsfiddle.net/rxxjp/

Answer 2

以下是一种方法：http://jsfiddle.net/vM9KM/4/

$('#result').children('div.event:nth-child(3n+1)').each(function(i,el) {
    $(this).next().andSelf().next().andSelf().wrapAll('<div class="outer">');
});

http://api.jquery.com/nth-child-selector/

Answer 3

我已使用splice和wrapAll函数对3个div进行分组并将其包装在<div class="wrapper" ></div>

中

DEMO

var events = $('#result .event');

while (events.length >= 3) {
    $(events.splice(0, 3)).wrapAll('<div class="wrapper" />');
}

//wrap the remaining < than 3 div inside wrapper
$(events.splice(0, events.length)).wrapAll('<div class="wrapper" />');

jquery group每隔3个div

3 个答案: