jQuery selector: detailed explanation of the use of last-child

Overview

Match the last child element

':last' matches only one element, while this selector will match one child element for each parent element

Example

Description:

Find the last 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:last-child")

Result:

[ <li>Brandon</li>, <li>Ralph</li> ]

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 selector, Element selector, 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 conjunction 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 jQuery selector: detailed explanation of the use of last-child. For more information, please follow other related articles on the PHP Chinese website!