jQuery :only-child 選擇器

jQuery 中的:only-child 選擇器用於選擇其父元素的唯一子元素。換句話說，它目標是那些在相同父元素中沒有兄弟姐妹的元素。

語法

以下是 jQuery :only-child 選擇器的語法：

$(":only-child")

引數

此選擇器將篩選並選擇作為其父元素唯一子元素的元素。

示例 1

在下面的示例中，我們使用 jQuery :only-child 選擇器來選擇每個作為其父 <div> 唯一子元素的 <p> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p:only-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black;">
        <p>Only paragraph</p>
    </div><br>
    <div style="border: 1px solid black;">
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div><br>
    <div style="border: 1px solid black;">
        <p>Only paragraph</p>
    </div>
</body>
</html>

執行上述程式後，選定的元素將以黃色背景色突出顯示。

示例 2

在這裡，我們選擇每個作為其父元素 (<div>) 唯一子元素的 <span> 元素：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Add a class to the only child of each parent div
            $("div span:only-child").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div style="border: 1px solid black;">
        <span>Only span</span>
    </div><br>
    <div style="border: 1px solid black;">
        <span>First span</span>
        <span>Second span</span>
    </div><br>
    <div style="border: 1px solid black;">
        <span>Another span</span>
        <span>And another one</span>
    </div>
</body>
</html>

執行後，選定的元素將以黃色背景色突出顯示。

jquery_ref_selectors.htm

列印頁面