jQuery分组每3个div

Question

我有以下结构，一个外部div (#results) 和大约20个class为event的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>

- LeBlaireau

Answer 1

尝试：

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

http://jsfiddle.net/rxxjp/

- Yoshi

---

巧妙地使用直接子元素选择器——我喜欢它。也许有十几种方法来解决同样的问题。 - Blazemonger

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/

- Blazemonger

Answer 3

我使用了 splice 和 wrapAll 函数来将 3 个 div 分组，并将它们包装在 <div class="wrapper" ></div> 中。

演示

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" />');

- Selvakumar Arumugam