javascript - .wrapAll() 基于相邻 sibling 的类和

Question

我有一系列 DIV，它们根据大小分配了 .big 或 .small。它们需要以两到三个为一组进行包装。实际上，分配的空间只能容纳两个 .big。

如果两个 .big DIV 彼此相邻存在，则应将它们分成两个一组。否则，DIV 应以三个为一组进行包装。

请让我知道我做错了什么以及如何让它发挥作用。下面是一个示例，其中包含关于包装应在何处断开的注释。下面是我在 jQuery 中尝试过的，还有一个 link to 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

首先 - 如果元素已经包装，你需要从函数返回，

其次，我不明白为什么你需要在 else 中使用 for 循环(你可以使用 $.nextAll() 获取所有兄弟当前)

here代码

$('.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​