jQuery | :selector de último tipo

El Selector :last-of-type se utiliza para seleccionar todos los elementos que son el último hijo de su padre.

Sintaxis:

$(":last-of-type")

Los siguientes ejemplos ilustran el selector :last-of-type en jQuery:

Ejemplo 1: Este ejemplo cambia el color de fondo a verde y el color de texto a blanco, del último elemento de sus padres (etiquetas div).

<!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>    

Producción:

Ejemplo 2: Este ejemplo cambia el color de fondo a verde y el color de texto a blanco, del último encabezado de la etiqueta <body>.

<!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>      

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *