2

我试图遍历一系列元素，迭代一个数字并以不同的方式将其应用于两个元素。

因此，假设我有 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'
    });

});

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

4

2 回答 2

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 个元素，以免它们相互重叠。

这是一个显示它工作的小提琴。

从下面的评论讨论中编辑：

如果增量值对您不重要，您可以使用直接 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 运算符来查看项目是否是该对中的第二个，并将顶部位置基于该对值。左侧位置稍作调整，因此可以看到。我调整了像素数以适应 jsFiddle 视图。

这是一个工作jsFiddle。

于 2012-08-28T17:06:57.887 回答