jquery - jQuery :nth-child()

Question

我有一个清单

<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>
<article class="post">Bla bla bla</article>

我会选择第 5 个和第 6 个元素，第 8 个和第 9 个，第 11 个和第 12 个，第 14 个和第 15 个等...

$('div#elencoNonHome > article.post:nth-child(???)').css('margin-left', '20px');

我可以用 jQuery 函数做到这一点吗？

Answer 1

You can do this with nth-child. Just add the two statements together.

$('div#elencoNonHome > article.post:nth-child(3n+6)')
 .add('div#elencoNonHome > article.post:nth-child(3n+5)')
 .css('margin-left', '20px');

See DEMO.

Answer 2

您不能直接使用 nth-child 执行此操作。它有相当简单的行匹配逻辑。但是，如果您颠倒逻辑，使默认边距为20px，则使用 nth-child 将行 #​​7、#10、#13 等拉到其他应有的位置

例如

$('div#elencoNonHome > article.post').css('margin-left', '20px');
$('div#elencoNonHome > article.post:nth-child("3n+7")').css('margin-left', 0)

Answer 3

当然，为什么不呢。

$('div#elencoNonHome > article.post').filter( function() {
    var index = $( this ).index();
    return index >= 4 && index % 3;
}).css('margin-left', '20px');

演示：http: //jsfiddle.net/R4vX2/1/