jQuery selector: detailed explanation of use cases of only-child

Overview

If an element is the only child element in the parent element, it will be matched

If the parent element contains other elements, it will not be matched.

Example

Description:

Find the li that is the only child element in ul

HTML code:

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

jQuery code:

$("ul li:only-child")

Result:

[ <li>Glen</li> ]

This selector will match the only child element of the parent element. If its parent element contains other elements, it will not be matched.

Grammar structure:

$(":only-child")

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

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

The above code can set the font color in the li element under the ul element with only one li 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教程
  
  

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

点击查看效果

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