.wrapAll() на основе класса соседних братьев и сестер и

Question

У меня есть серия DIV, которые назначены .big или же .small в зависимости от размера. Их нужно свернуть в группы по два или три. Практически говоря, только два .bigs может поместиться в отведенное место.

Если два .big DIV существуют рядом друг с другом, их следует объединить в группы по два человека. В противном случае DIV должны быть объединены в группы по три.

Пожалуйста, дайте мне знать, что я сделал неправильно и как заставить это работать. Ниже приведен пример с комментариями о том, где обертки должны сломаться. Ниже это то, что я пробовал в jQuery, и ссылка на jsFiddle.

<div class="big post">big</div>
<div class="big post">big</div>
    <!-- should be wrap break -->
<div class="big post">big</div>
<div class="big post">big</div>
    <!-- should be wrap break -->
<div class="big post">big</div>
<div class="small post">small</div>
<div class="big post">big</div>
    <!-- should be wrap break -->
<div class="small post">small</div>
<div class="small post">small</div>
<div class="big post">big</div>
    <!-- should be wrap break -->
<div class="big post">big</div>
<div class="small post">small</div>
    <!-- should be wrap break -->

я думаю ifниже, работает довольно хорошо, но else ломает все вещи.

$('.post').each(function() {    
    if ( $(this).hasClass('big') && $(this).next('.post').hasClass('big') ) {    
        var allElements = $(this).next().andSelf(),
            WRAP_BY = 2;
        for (var i = 0; i < allElements.length; i += WRAP_BY) {
            allElements.slice(i, i + WRAP_BY).andSelf().wrapAll('<div class="flowed" />');
        }//for                            
    }//if
else {
    // the else breaks all the things
        var allElements = $(this).next().andSelf(),
            WRAP_BY = 3;
        for (var i = 0; i < allElements.length; i += WRAP_BY) {
            allElements.slice(i, i + WRAP_BY).andSelf().wrapAll('<div class="flowed" />');
        }//for                                        
}//else
});//each

http://jsfiddle.net/natejones/UvsZE/

Answer 1

Во -первых - вам нужно вернуться из функции, если элементы уже обернуты,

во-вторых, я не понимаю, зачем тебе for зациклиться else(ты можешь использовать $.nextAll() чтобы получить все братья после текущей)

здесь код

$('.post').each(function() {
    //return if already wrapped!
    if ($(this).parent().hasClass('flowed')) {
        return;
    }
    var WRAP_BY = 3;
    if ($(this).hasClass('big') && $(this).next('.post').hasClass('big')) {
        WRAP_BY = 2;
    }
    var allElements = $(this).nextAll().andSelf();
    allElements.slice(0, WRAP_BY).wrapAll('<div class="flowed" />');
}); //each​