jQuery的：第n个孩子（）

问题描述：

<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函数做到这一点吗？

答

你可以用第n个孩子做到这一点。只需将这两个陈述加在一起。

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

请参阅DEMO。

如果我将这个应用到新的元素？用“活”？ – Swim89 2013-03-25 16:56:23

@ Swim89使用'.on（）'。 '.live（）'被弃用。在加载新元素后再次重新应用这些语句。 – Antony 2013-03-25 17:10:41

你能给我写个例子吗？ – Swim89 2013-03-25 17:13:14

答

你不能直接用nth-child做到这一点。它有相当简单的行匹配逻辑。但是，如果您反转逻辑，以便默认边距为20px，那么使用第n个子将行＃7，＃10，＃13等拉至任何它应该以其他方式进行的操作

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

这并不完全符合OP的要求（甚至在修复引起错误消息的额外双引号之后）。 http://jsfiddle.net/R4vX2/2/ – JJJ 2013-03-25 14:51:10

答

当然，为什么不呢。

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

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

jQuery的：第n个孩子（）

相关推荐