2

一連の要素をループして、数値を反復し、それをさまざまな方法で 2 つのペアに適用しようとしています。

たとえば、20 個の要素があり、最初の 6 個の要素をそのまま残したい場合は、6 でスライスします。次に、これらの要素のそれぞれに #7 から始まるスタイルを適用する必要がありますが、これは 2 つずつペアで行う必要があります。したがって、要素 7 と 8 が一番上になります。左: 0; 要素 9 と 10 が一番上になります: 240px; 左: 240px;

要素 11 と 12 が一番上になります: 480px; 左: 0; 要素 13 と 14 が一番上になります: 720px; 左: 240px;

そのパターンが理にかなっていることを願っています。

これを達成するための最良の方法がわかりません。私のコードは以下のとおりですが、「this」を使用して要素を参照するだけで、ペアを識別しようとしているわけではありません。それが私がどうしたらよいか分からないことです。

これが私の例です：

$('#main article').slice(6).each(function(i) {

    // first pair of two
    $(this).css({
        top  : i * 240 + 'px'
    });

    // second pair of two
    $(this).css({
        top  : i * 240 + 'px',
        left : 480 + 'px'
    });

});

どんな助けでも本当に感謝しています。ありがとう、

4

2 に答える 2

1

元のJS回答の下のCSSのみの非増分更新。

リストで for ループを使用するように変更し、途中でインデックスをインクリメントできます。

var el = $('#main .article');
for(var i=0; i <= el.length; i++){
    var left = (i == 0) ? 0 : i * 40;
        $(el[i]).css({
            top: i * 40 + "px",
            left: left + "px"
        });
        i++;
        $(el[i]).css({
            top: i * 40 + "px",
            left: left + "px"
        });
}​

もちろん、スライスを使用することはできますが、position:relative または absolute を使用している場合は、最初の 6 つの要素が互いに重ならないように正しく配置する必要があります。

これが機能していることを示すフィドルです。

以下のコメントディスカッションから編集：

増分値が重要でない場合は、ストレート CSS でパターンを実現できます。

.article:nth-child(4n-1),
.article:nth-child(4n-1) + li{
    opacity: 0.4;
}

これがそのためのフィドルです。

于 2012-08-28T17:35:53.087 に答える
0

とても簡単です - .each ループに必要なコードはほんの少しです:

var pair = 0;
$('#main .article').slice(6).each(function(i) {
    var second = i%2 > 0;
    var topPx = (20 + (pair * 24)) + 'px';
    var leftPx = (pair * 24 + (second? 20 : 0)) + 'px';
    $(this).css({ "top": topPx, "left": leftPx });
    if(second) pair++;
});

これは mod 演算子を使用して、アイテムがペアの 2 番目のものであるかどうかを確認し、そのペアの値に基づいてトップ ポジションを決定します。見えるように左の位置を少し調整します。jsFiddle ビューに合わせてピクセル数を調整しました。

これは動作中のjsFiddleです。

于 2012-08-28T17:06:57.887 に答える