选择jQuery中的每个第n项?

时间:2009-11-24 17:54:47

标签: jquery css jquery-selectors

jQuery有方便的:偶数和:奇数选择器用于选择集合中的偶数或奇数索引项目,我用它来清除一系列浮动框中的每个其他项目,如下所示:

<div class='2up'>
   <div> ... </div>
   <div> ... </div>
   ...
   <div> ... </div>
</div>

// Clear every 2nd block for 2-up blocks
$('.2up>div:even').css("clear", "both");

这就像一个魅力。

我的问题:jQuery中是否有一种直接的方式来选择每个第三或第四项,所以我可以用3-up或4-up项目做同样的事情?

4 个答案:

答案 0 :(得分:26)

尝试:

$("div:nth-child(3n+1)").css("clear", "both");

答案 1 :(得分:6)

您可以使用:nth-​​child(索引/偶数/奇数/等式)选择器。 http://docs.jquery.com/Selectors/nthChild#index

答案 2 :(得分:2)

您可以使用:nth-child(index/even/odd/equation)选择器。

示例:

<div class='5up'>
   <div> ... </div>
   <div> ... </div>
   ...
   <div> ... </div>
</div>
// Clear every 5th block for 5-up blocks
$('.5up>div:nth-child(5n)').css("clear", "both");
// Clear after every 5th block for 5-up blocks
// note: This will also clear first block.
$('.5up>div:nth-child(5n+1)').css("clear", "both");

答案 3 :(得分:1)

不,不是这样的。 filter函数可以让你这样做。


修改

我的立场得到了纠正。为简单起见,使用第n个子函数。