2009-11-24 101 views
9

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

<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中是否有一种简单的方法来选择每三分之一或四分之一的项目,所以我可以用三合一或四合一的项目做同样的事情?

回答

25

尝试:

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

':第n-child'也是标准CSS3,而':odd'是一个jQuery /灒,只是不会在你工作的样式表扩展。 – bobince 2009-11-24 18:43:31

+0

你也可以只使用CSS,你只是想申请样式: '.twoup div:nth-​​child(4n + 1){clear:both;}' – 2014-02-27 01:21:21

1

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


编辑:

我认错。为了简单起见,请使用第n个子功能。

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");

+0

FWIW:由于它是基于零的,所以'(5n)在第5个块之前和之后的每个第5个块之前清除,所以最终在第一行中有4个块,在随后的行中有5个块。 '(5n + 1)'完美地工作。 – 2009-11-29 20:20:19