jQuery :nth-child selector use case

Overview

Matches the Nth child or odd-even element under its parent element

':eq(index)' only matches one element, and this will match the child for each parent element element. :nth-child starts from 1, and :eq() starts from 0! You can use:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

Parameter

indexNumberV1.1.4

To match the sequence number of the element, Starting from 1

Example

Description:

Find the 2nd li in each ul

HTML code:

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

jQuery Code:

$("ul li:nth-child(2)")

Result:

[ <li>Karl</li>, <li>Tane</li> ]

This selector matches the Nth child or odd-even element under its parent element. The
:eq(index) selector only matches one element, while the :nth-child selector will match child elements for every parent element.
:nth-child starts from 1, and :eq() starts from 0.
Grammar structure:

$(":nth-child")

This selector is generally used in conjunction with other selectors, such as Class selector, Element selector, etc. For example:

$("li:nth-child(2)").css("color","blue")

The above code can set the font color in the second li element under the parent element to blue. It is also possible to calculate odd and even child elements of a parent element. For example:

$("li:nth-child(even)").css("color","blue")

The above code can set the font color in the even-numbered li element under the parent element to blue.

Note: It is necessary to explain the concept in combination with the above code. The parent element mentioned here is not li, but the parent element of li.
Many people often mistakenly think that it is the last element in the child element that matches the li element.

Example code:

  

    
ASP教程
    
ASP.NET教程
    
;PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

The above is the detailed content of jQuery :nth-child selector use case. For more information, please follow other related articles on the PHP Chinese website!