jQuery :nth-child() 選擇器



jQuery 中的:nth-child() 選擇器用於選擇其父元素的第 n 個子元素。

此方法允許您根據元素在其父元素的子元素列表中的位置來選擇元素,使用“索引”和“公式”引數。

語法

以下是 jQuery :nth-child() 選擇器的語法:

:nth-child(n|even|odd|formula)

引數

以下是上述語法的描述:

  • n: 選擇其父元素的第 n 個子元素。索引從 1 開始,而不是 0。
  • even|odd: 分別選擇偶數和奇數編號的子元素。
  • formula: 根據數學公式 (an+b) 選擇元素。“a” 和“b” 是整數。

示例 1

在以下示例中,我們使用 jQuery :nth-child() 選擇器來選擇 <ul> 中的第 2 個 <li> 元素:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <h2>List Example</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

執行上述程式後,作為其父元素 (<ul>) 的第二個子元素的 <li> 將以黃色背景顏色突出顯示。

示例 2

在此示例中,我們使用“odd”和“even”引數來選擇奇數和偶數子 (<li>) 元素:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("li:nth-child(odd)").css("background-color", "yellow");
          $("li:nth-child(even)").css("background-color", "lightblue");  
        });
    </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</body>
</html>

執行程式後,奇數編號的列表項將以黃色背景顏色突出顯示,偶數編號的項將以淺藍色突出顯示。

示例 3

p:nth-child(3n+1) 選擇 <div> 元素內的每個第一個和後續的第三個段落:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-child(3n+1)").css("background-color", "yellow");
        });
    </script>
</head>
<body>
<div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
</div>
</body>
</html>

執行上述程式後,所選元素將以黃色背景顏色突出顯示。

jquery_ref_selectors.htm
廣告