1

サイズに基づいて.big割り当てられた一連のDIVがあります。.smallそれらは2つまたは3つのグループにラップする必要があります。実際に.bigは、割り当てられたスペースに収まるのは2つだけです。

2つの.bigDIVが互いに隣接して存在する場合、それらは2つのグループにラップする必要があります。それ以外の場合、DIVは3つのグループにラップする必要があります。

私が間違ったこととそれを機能させる方法を教えてください。以下は、ラップを壊すべき場所についてのコメント付きの例です。その下に私が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/

4

1 に答える 1

2

最初 - 要素がすでにラップされている場合は、関数から戻る必要があります。

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​
于 2012-10-22T03:21:20.470 に答える