jQuery | :nth-of-type() 选择器

:nth-of-type()是 jQuery的内置选择器，用于选择指定父元素的所有第 n 个子元素。

句法 ：

parent_name : nth-of-type(n|even|odd|algebric equation)

参数：它需要一个参数n |甚至|奇数|代数方程。

Value	Description
n	Select the child present at nth index (starting from 1). n must be an integer.
even	Selects the child present at even index.
odd	Selects the child present at odd index.
algebric equation	Select the child present at the value of the equation, equation should be of type mn + c or mn – c, where m and c are constant values.

笔记：

• 不同部分或部门中的子元素被区别对待
  即，索引从头开始。
• 在 mn + c 中，n 从值 0 开始。

示例 1：使用n作为参数。

  

    
  
    
  
        $(document).ready(function() {
            $("p:nth-of-type(2)").css(
              "color", "green");
        });
    

  

    Geeks 1
    Geeks 2
  
    
  
    
  
        geeks for geeks 1
        geeks for geeks 2
        geeks for geeks 3
    
  
    
    Geeks 3
  

  

输出：

在上面的例子中，索引 2 处的子元素（父元素是 p 标签）被格式化为绿色，即“Geeks 2”和“geeks for geeks 2”。

示例 2：使用even作为参数。

  

    
  
   
  
        $(document).mouseover(function() {
            $("p:nth-of-type(even)").css(
              "background-color", "green");
        });
    

  

    Geeks 1
    Geeks 2
  
    
        
        geeks for geeks 1
        geeks for geeks 2
        geeks for geeks 3
    
  
    
    Geeks 3
  

  

输出：

在上面的例子中，偶数索引处的子元素（父元素是 p 标签）被格式化为绿色背景，即“Geeks 2”和“geeks for geeks 2”。

示例 3：使用奇数作为参数。

  

    
  
     
  
        $(document).mouseover(function() {
            $("p:nth-of-type(odd)").css(
              "color", "red");
        });
    

  

    Geeks 1
    Geeks 2
  
    
        
        geeks for geeks 1
        geeks for geeks 2
        geeks for geeks 3
    
  
    
    Geeks 3
  

  

输出：

在上面的例子中，奇数索引处的子元素（父元素是 p 标签）被格式化为红色，即“Geeks 1”、“geeks for geeks 1”、“geeks for geeks 3”和“Geeks 3”。

示例 4：使用代数方程作为参数。

  

    
  
    
  
        $(document).mouseover(function() {
            $("p:nth-of-type(3n+2)").css(
              "color", "green");
        });
    

  

    Geeks 1
    Geeks 2
  
    
        
        geeks for geeks 1
        geeks for geeks 2
        geeks for geeks 3
        geeks for geeks 4
        geeks for geeks 5
    
  
    
    Geeks 3
  

  

输出：

在上面的例子中，索引值等于 3n + 2（父元素是 p 标签）的子元素被格式化为绿色，即“Geeks 2”、“geeks for geeks 2”、“geeks for geeks 5”。