Summary of the use of jQuery selectors: first-child, :nth-child and :last-child

jQuery:first-childSelector usage example

This selector can match the first child element of the parent element.

Grammar structure:

$(":first-child")

This selector is generally used in conjunction with other selectors, such as class selector , elements Selector and so on. For example:

$("ul li:first-child").css("color","blue")

The above code can set the font color in the first 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 matches the last element among the child elements of the li element.

Example code:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

In the above code, clicking the button can set the text color of the first li element under each ul to blue.

jQuery:nth-child selector usage example

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 selectors, element selectors, 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教程
  

点击查看效果

jQuery:last-child selector usage example

This selector can match the last child element of the parent element.

Note: last only selects one element, and this selector will match the last child element of each parent element.
Grammar structure:

$(":last-child")

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

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

The above code can set the font color in the last 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 matches the last element among the child elements of the li element.

Example code:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

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