Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select every nth item in jQuery?

jQuery has the handy :even and :odd selectors for selecting the even- or odd-indexed items in a set, which I'm using to clear every other item in a series of floated boxes, as follows:

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

and

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

This works like a charm.

My question: Is there a straightforward way in jQuery to select every third or fourth item, so I could do the same thing with 3-up or 4-up items?

like image 443
Herb Caudill Avatar asked Nov 24 '09 17:11

Herb Caudill


People also ask

How to select nth child in jQuery?

jQuery :nth-child() Selector The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent. Tip: Use the :nth-of-type() selector to select all elements that are the nth child, of a particular type, of their parent.

What is nth element in JavaScript?

JavaScript: Get the nth element of a given array Use Array. prototype. slice() to get an array containing the nth element at the first place. If the index is out of bounds, return undefined. Omit the second argument, n, to get the first element of the array.

Which of the following CSS selectors will select the second div in jQuery?

myclass:eq(1)" ) selects the second element in the document with the class myclass, rather than the first. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification. Prior to jQuery 1.8, the :eq(index) selector did not accept a negative value for index (though the . eq(index) method did).

How can I get second child in jQuery?

Using jQuery :nth-child Selector You have put the position of an element as its argument which is 2 as you want to select the second li element. If you want to get the exact element, you have to specify the index value of the item. A list element starts with an index 0.


4 Answers

Try:

$("div:nth-child(3n+1)").css("clear", "both");
like image 91
loviji Avatar answered Oct 03 '22 13:10

loviji


You could use the :nth-child(index/even/odd/equation) selector. http://docs.jquery.com/Selectors/nthChild#index

like image 31
Chris Gutierrez Avatar answered Oct 03 '22 13:10

Chris Gutierrez


you can use the :nth-child(index/even/odd/equation) selector.

Example:

<div class='5up'>
   <div> ... </div>
   <div> ... </div>
   ...
   <div> ... </div>
</div>
and
// Clear every 5th block for 5-up blocks
$('.5up>div:nth-child(5n)').css("clear", "both");
or
// 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");
like image 32
alexanderpas Avatar answered Oct 01 '22 13:10

alexanderpas


No, not as such. The filter function will let you do that though.


EDIT:

I stand corrected. Use the n-th child function for simplicity.

like image 42
Sean Vieira Avatar answered Sep 30 '22 13:09

Sean Vieira