jQuery Slice函数/每对两个

Question

我试图遍历一系列元素，迭代一个数字并以不同的方式应用它们成对的两个。

所以，假设我有二十个元素，并希望保留前六个元素不变，我在6处切片。然后，我需要将样式应用于从＃7开始的每个元素，但需要以两对的形式进行。因此，元素7和8将是顶部：0;左：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'
    });

});

任何帮助都非常感谢。谢谢，

Answer 1

CSS只有非原始JS回答的非增量更新。

您可以将其更改为在列表中使用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个元素，这样它们就不会相互重叠。

Here's a fiddle showing it working.

以下评论讨论编辑：

如果增量值对您不重要，您可以使用直接CSS实现模式：

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

Here's the fiddle for that.

Answer 2

很容易做 - 在.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运算符来查看该项是否是该对中的第二个，并将基于该对值的顶部位置。左侧位置稍微调整，以便可以看到。我调整了像素数以适应jsFiddle视图。

这是一个有效的jsFiddle。