jQuery Slice 函数/每对两个

Question

我正在尝试循环一系列元素，迭代一个数字并以不同的方式将其应用于两个元素对。

所以，假设我有 20 个元素，并且想要保持前 6 个元素不变，我在 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.