JQuery группы каждый третий див

Question

У меня есть следующая структура, один внешний div (#results) и около 20 div с событием класса. Я хочу сгруппировать каждые 3 события и обернуть вокруг них div, называемый external,

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