jQuery選擇器:only-child的使用案例詳解

概述

如果某個元素是父元素中唯一的子元素，那將會被符合

如果父元素中含有其他元素，那將不會被符合。

範例

描述:

在ul 中尋找是唯一子元素的li

HTML 程式碼:

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

jQuery 程式碼:

$("ul li:only-child")

結果:

[ <li>Glen</li> ]

此選擇器將符合父元素的唯一子元素。如果其父元素中含有其他元素，則不會被符合。

語法結構:

$(":only-child")

此選擇器一般也要和其他選擇器搭配使用，例如類別選擇器、元素選擇器等等。例如：

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

以上程式碼能夠將只有一個li元素的ul元素下的li元素中的字體顏色設定為藍色。

注意:這裡有必要結合上面的程式碼再對概念進行一下說明。這裡所說的父元素不是li，而是li的父元素。很多人往往誤以為是匹配li元素的子元素中的最後一個元素。

實例程式碼:

  

    
ASP教程
  
  

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

点击查看效果

以上是jQuery選擇器:only-child的使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！