jQuery Slice函数/每对两个

时间:2012-08-28 16:20:31

标签: jquery function slice each

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

所以,假设我有二十个元素,并希望保留前六个元素不变,我在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'
    });

});

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

2 个答案:

答案 0 :(得分: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"
        });
}​

当然你仍然可以使用切片,但如果你使用的是位置:相对或绝对,你需要正确定位前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.

答案 1 :(得分: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