jQuery | Filtrado transversal

El filtrado transversal en jQuery se usa para encontrar elementos HTML en función de su relación con los otros elementos. El filtrado es el proceso en jQuery que se utiliza para permitir encontrar un elemento en particular con alguna condición o sin condición. Hay cinco tipos básicos de métodos de filtrado que se pueden utilizar para seleccionar un elemento que se enumeran a continuación:

  • Primero() método
  • Método último()
  • Método eq()
  • método filter()
  • Método no()
  • Método first(): El método first() en jQuery se usa para seleccionar el primer elemento del grupo de elementos.

    Sintaxis:

    $(selector).first()

    Parámetro: No acepta ningún parámetro.

    Valor devuelto: Devuelve el primer elemento de los elementos seleccionados.

    Ejemplo:

    <!DOCTYPE html>
    <html>
       
    <head>
        <title>
            jQuery first() method
        </title>
        <script src=
        </script>
          
        <!-- Script to use first() method -->
        <script>
            $(document).ready(function() {
                $("div").first().css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    Producción:

  • Método last(): El método last() en jQuery se usa para encontrar el último elemento en un grupo de elementos.

    Sintaxis:

    $(selector).last()

    Parámetro: No acepta ningún parámetro.

    Valor devuelto: Devuelve el último elemento fuera de los elementos seleccionados.

    Ejemplo:

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use last() method -->
        <script>
            $(document).ready(function() {
                $("div").last().css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    Producción:

  • Método eq(): este método se utiliza para seleccionar elementos con el número de índice específico.
    Sintaxis:
    $(selector).eq(index_number)

    Parámetro: Toma un número de índice para el elemento especificado.

    Valor de retorno: Devuelve el elemento con número de índice específico de los elementos seleccionados.

    Ejemplo:

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use eq() method -->
        <script>
            $(document).ready(function() {
                $("div").eq(1).css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    Producción:

  • método filter(): Este método se utiliza para seleccionar elementos con algunos criterios específicos.
    Sintaxis:
    $(selector).filter(parameter)

    Parámetro: se necesita un nombre de clase o un nombre de identificación para filtrar un elemento específico del otro con el mismo nombre de elemento.

    Valor devuelto: Devuelve todos los elementos con los criterios de cumplimiento.

    Ejemplo:

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use filter() method -->
        <script>
            $(document).ready(function() {
                $("div").filter(".demo").css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div class="demo" style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div class="demo" style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    Producción:

  • Método not(): este método se utiliza para seleccionar todos los elementos que no cumplen con algunos criterios.
    Sintaxis:
    $(selector).not(parameter)

    Parámetro: se necesita un nombre de clase o un nombre de identificación para anular la selección de los elementos del otro con el mismo nombre de elemento.

    Valor devuelto: Devuelve todos los elementos que no cumplen los criterios.

    Ejemplo:

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use not() method -->
        <script>
            $(document).ready(function() {
                $("div").not(".demo").css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div class="demo" style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div class="demo" style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    Producción:

Publicación traducida automáticamente

Artículo escrito por Sruti Rai 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 *