jQuery :last-of-type用法及代码示例

：last-of-type选择器用于选择作为其父级的最后一个子级的所有元素。

用法:

$(":last-of-type")

以下示例说明了jQuery中的last-of-type选择器：

范例1：本示例将其父级的最后一个元素(div标签)的背景颜色更改为绿色，并将text-color更改为白色。

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            jQuery |:last-of-type Selector 
        </title> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- Script to use last-of-type selector -->
        <script> 
            $(document).ready(function() { 
                $("h4:last-of-type").css({ 
                    "background-color":"green",  
                    "color":"white" 
                }); 
            }); 
        </script> 
          
        <!-- CSS property to set style of element -->
        <style> 
           option { 
            font-weight:bold; 
            font-size:25px; 
            color:green; 
           } 
           select { 
            font-weight:bold; 
            font-size:25px; 
            color:green; 
           } 
        </style> 
    </head>  
      
    <body style="text-align:center;">   
        <h1>   
            jQuery |:last-of-type Selector 
        </h1>  
          
        <div style= "border:1px solid blue;"> 
            <h4>The first heading in first div.</h4> 
            <h4>The last heading in first div.</h4> 
        </div><br> 
   
        <div style= "border:1px solid blue;"> 
            <h4>The first heading in second div.</h4> 
            <h4>The last heading in second div.</h4> 
        </div> 
    </body>   
</html>

输出：

范例2：本示例将<body>标签的最后一个标题的背景颜色更改为绿色，并将text-color更改为白色。

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            jQuery |:last-of-type Selector 
        </title> 
          
        <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- Script to use last-of-type selector -->
        <script> 
            $(document).ready(function() { 
                $("h4:last-of-type").css({ 
                    "background-color":"green",  
                    "color":"white" 
                }); 
            }); 
        </script> 
          
        <style> 
            option { 
                font-weight:bold; 
                font-size:25px; 
                color:green; 
            } 
            select { 
                font-weight:bold; 
                font-size:25px; 
                color:green; 
            } 
        </style> 
    </head>  
      
    <body style="text-align:center;">   
        <h1>   
            jQuery |:last-of-type Selector 
        </h1>   
        <h4>The first heading in body.</h4> 
   
        <h4>The last heading in body.</h4> 
              
    </body>   
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 jQuery | :last-of-type Selector。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。