jQuery | eq() con ejemplos

jQuery es una herramienta muy poderosa que nos ayuda a incorporar una variedad de métodos transversales DOM para seleccionar elementos en un documento al azar o en orden secuencial. La mayoría de los métodos transversales de DOM no modifican los elementos, sino que los filtran según las condiciones dadas.
El método eq() es un método incorporado en jQuery que se usa para ubicar los elementos seleccionados directamente y devuelve un elemento con un índice específico.
Sintaxis:

$(selector).eq(index)

Parámetros: Aquí el parámetro “índice” especifica el índice del elemento.
Puede ser un número positivo o negativo.
NOTA:

  • El número de índice siempre comienza en 0, por lo que el primer número tendrá índice 0 (no 1).
  • El uso de un número negativo como índice inicia el recuento del índice desde el final de la lista.

código jQuery para mostrar el funcionamiento del método eq():

Código #1:
El siguiente código seleccionará los elementos especificados.

<html>
  
<head>
    <title>GeeksForGeeks articles</title>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".heading").eq(0).css("color", "red");
            $(".heading").eq(2).css("color", "yellow");
        });
    </script>
</head>
  
<body>
    <h1 class="heading">GeeksForGeeks</h1>
    <h2 class="heading">GeeksForGeeks</h2>
    <h3 class="heading">GeeksForGeeks</h3>
    <h4 class="heading">GeeksForGeeks</h4>
</body>
  
</html>

Salida:

Código #2:
El siguiente código seleccionará los elementos especificados con índice negativo.

<html>
  
<head>
    <title>GeeksForGeeks articles</title>
    <script src="https://ajax.googleapis.com/ajax/
                 libs/jquery/3.3.1/jquery.min.js"></script>
  
    <script type="text/javascript">
        $(document).ready(function() {
            $(".heading").eq(-2).addClass("style");
            $(".heading").eq(-4).addClass("style");
  
        });
    </script>
    <style>
        .style {
            color: red;
            font-family: fantasy;
            font-size: 20px;
        }
    </style>
</head>
  
<body>
    <ul>
        <li class="heading">GeeksForGeeks</li>
        <li class="heading">GeeksForGeeks</li>
        <li class="heading">GeeksForGeeks</li>
        <li class="heading">GeeksForGeeks</li>
    </ul>
</body>
  
</html>

Producción:

jQuery: eq() frente a get()

  • .eq() lo devuelve como un objeto jQuery, lo que significa que el elemento DOM está envuelto en el contenedor jQuery, lo que significa que acepta funciones jQuery.
  • .get() devuelve una array de elementos DOM sin procesar.

Publicación traducida automáticamente

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