jQuery :nth-of-type() 選擇器

jQuery 中的:nth-of-type() 選擇器用於選擇其父元素的第 n 個子元素（特定型別）。

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

語法

以下是 jQuery 中 :nth-of-type() 選擇器的語法：

:nth-of-type(n|even|odd|formula)

引數

以下是上述語法的描述：

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

示例 1

在以下示例中，我們使用“jQuery :nth-of-type()”選擇器來選擇其父元素（<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-of-type(2)").css("background-color", "yellow");
        });
        </script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

執行上述程式後，第二個 <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-of-type(odd)").css("background-color", "yellow");
          $("li:nth-of-type(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-last-child(3n+2) 選擇每三個段落中的一個，從第二個段落開始：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
          $("p:nth-of-type(3n+2)").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

列印頁面