Cómo obtener el enésimo elemento jQuery

311

En jQuery, $("...").get(3)devuelve el tercer elemento DOM. ¿Cuál es la función para devolver el tercer elemento jQuery?

jquery Sam Lee
fuente

Respuestas:

310

¿Por qué no navegar primero por la página de selectores (cortos)?

Aquí está: el :eq()operador. Se usa igual que get(), pero devuelve el objeto jQuery.

O también puedes usar la .eq()función.

Dykam
fuente
23
¿No se supone que es .eq()eso en lugar de :eq()?
RubenGeert
15
Sí, .eq()es más apropiado para la pregunta del OP. :eq()se usa dentro del parámetro string para $, mientras que .eq()es un método en un objeto jQuery existente.
mjswensen
55
Juro que tengo que ir y buscar esto cada vez . sola . tiempo .
ivarni
3
@JoelWorsham Depende del comportamiento deseado. $('select').find('option').eq(n)básicamente ignorará la agrupación y obtendrá todas las opciones como un todo. Si lo desea por grupo, es necesario algo como esto:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
44
"¿Por qué no explorar primero la página de selectores (cortos)?" - Debido a que "eq" es un nombre muy malo y regularmente lo omito ya que la ecuación para mí significa comparación ...
mmlac
309

Puede usar el selector : eq , por ejemplo:

$("td:eq(2)").css("color", "red"); // gets the third td element

O la función eq (int) :

$("td").eq(2).css("color", "red");

Además, recuerde que los índices están basados ​​en cero.

CMS
fuente
77
Como sinónimo, también puede usar el :nth()selector, que no debe confundirse con:nth-child()
user123444555621
La mejor respuesta y no editado 3 años después del hecho :)
Andrew
gracias por explicar cómo utilizar el selector / función
Joseph Rogers
49

si tiene control sobre la consulta que construye el objeto jQuery, use :eq()

$("div:eq(2)")

Si no tiene control sobre él (por ejemplo, se pasa de otra función o algo), use .eq()

var $thirdElement = $jqObj.eq(2);

O si desea una sección de ellos (digamos, los elementos tercero, cuarto y quinto), use .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
fuente
Estaba buscando rebanada, pero no estaba seguro de cómo buscar. Gracias por ir más allá de lo requerido en la pregunta original.
Samik R
44
Para las personas que tropiezan con esta respuesta, un punto útil a tener en cuenta es que el selector de enésimo hijo está basado en 1 mientras que: eq o .eq () están basados ​​en 0
Sudhanshu Mishra
1
Debería usar en .eq()lugar de en :eq()realidad. Ligero aumento de rendimiento.
Qwerty
13

Creo que puedes usar esto 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Encuentra el segundo li en cada ul coincidente y lo anota.

JoenasE
fuente
11

.eq () -Un número entero que indica la posición del elemento basada en 0.

Ex:

Considere una página con una lista simple:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Podemos aplicar este método al conjunto de elementos de la lista:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Para más información: .eq ()

tilak
fuente
3

Si ya tiene el objeto jquery en una variable, también puede tratarlo como una matriz indexada normal, sin el uso de jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Aunque el ejemplo anterior no es útil de ninguna manera, representa cómo puede tratar los objetos creados por jquery como matrices indexadas.

Au.Merci
fuente
Correcto, y una pista más (con suerte útil): si la fila contiene una lista de <select>elementos, y desea el elemento del cuadro combinado seleccionado, use$(row).val();
Matt
2

Si entiendo su pregunta correctamente, siempre puede ajustar la función get de esta manera:

var $someJqueryEl = $($('.myJqueryEls').get(3));
usuario1205577
fuente
3
Esto es solo el "camino difícil" y esto es lo eq()que te ofrece de forma gratuita.
Caumons
1

Si desea obtener un elemento / nodo particular o una etiqueta en bucle, por ejemplo,

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Entonces, desde el bucle de código anterior se ejecuta y queremos seleccionar un campo particular para eso, tenemos que usar la selección jQuery que puede seleccionar solo el elemento esperado del bucle anterior, por lo que el código será

$('.weekdays:eq(n)');

p.ej

$('.weekdays:eq(0)');

así como por otro método

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

pero el primer método es más eficiente cuando HTML <tag>tiene un nombre de clase único.

NOTA: El segundo método se usa cuando no hay un nombre de clase en el elemento o nodo de destino.

para más información, siga https://api.jquery.com/eq/

Vrushal Raut
fuente
0

Sin embargo, para las iteraciones, usar un selector no parece tener sentido:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

fuente
0

Ejemplo en vivo para acceder y eliminar el enésimo elemento con jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Cuando se ejecuta, hay dos elementos en la lista ordenada que se muestran, Primero y Tercero. El segundo estaba oculto.

Eric Leschinski
fuente
PD: El recuento comienza desde 0; Primero está en el índice 0, Segundo está en el índice 1 y así sucesivamente ...
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Sanjay Verma
fuente
"$ (function () {" primero de otoño, he creado una función anónima, que se disparó automáticamente. Dentro de eso, encontré tres div principales usando hermanos. Luego iteré en los 3 div primarios y verifiqué la longitud de la longitud de cada hijo. Cómo puedo identificar si es un último div o no en el padre. Ahora estoy alertando al último div html de cada 3 div padre principal.
Sanjay Verma
Puedes editar tu respuesta, en lugar de dar información en los comentarios :)
T3 H40