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>

我会选择第五个＆amp;第6个元素，第8个＆amp; 9th，11th＆amp; 12日，14日＆amp; 15日等等......

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

我可以使用jQuery函数吗？

Answer 1

你可以用n-child做到这一点。只需将两个语句一起添加即可。

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

请参阅DEMO。

Answer 2

你不能直接用nth-child做这件事。它有相当简单的行匹配逻辑。但是如果你颠倒了逻辑，那么默认的余量是20px，那么使用nth-child将第7行，第10行，第13行等拉到其他任何地方

e.g。

$('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/