Defina jQuery "eq"

Question

Estoy teniendo un momento difícil envolviendo mi cabeza alrededor del jQuery eq. ¿Alguien puede explicarme su uso? ¿Qué y cómo indexa?

gracias.

Answer 1

Con este código HTML:

<ul> 
    <li>Mario</li> 
    <li>Luigi</li> 
    <li>Princess</li> 
    <li>Toad</li> 
</ul> 

Y esto JavaScript:

alert($("ul li").eq(0).text()); // Mario 
alert($("ul li").eq(1).text()); // Luigi 
alert($("ul li").eq(2).text()); // Princess 
alert($("ul li").eq(3).text()); // Toad 

Answer 2

.eq(i) devuelve un elemento de una colección en un índice especificado i.

En el ejemplo desde el enlace que colocado:

$("p").eq(1).css("color", "red")

Básicamente dice: "Encuentra todos los elementos que coincidan con $ (" p ") y luego tomar la segunda uno y cambiar su color a rojo. "

$("p") coincide con todos los <p> elementos en su documento. Ahora tienes una colección de esos.

$("p").eq(1) reduce esta colección solo al 2. ° elemento.

la parte .css("color", "red") simplemente opera en ese elemento para cambiar su color a rojo.

Answer 3

echar un vistazo al ejemplo de documentos:

$("p").eq(1).css("color", "red") 

$("p")    selects all paragraphs in your document 
.eq(1)    selects the second element only 
.css("color", "red") applies css rule to the selected element 

Answer 4

Suena como que podría estar quedar atrapados en la palabra 'índice'.

En este caso, 'índice' se refiere a un elemento específico en una colección de artículos. Por lo tanto, eq le dará acceso a un solo elemento dentro de un conjunto combinado de elementos.

Answer 5

Para entender cómo funciona eq(), creo que ayuda a comprender cómo funciona $() en jQuery. Cuando se especifica

$([selector],[context]) 

//which is the same as 

$([context]).find([selector]) 

lo que se devuelve es un jQuery objeto (a veces conocido como un envuelta establecer) que, entre otras propiedades, tiene una propiedad a partir de 0 e incrementando en 1 por cada elemento que coincide con el selector. También se establece una propiedad length, por lo que los elementos coincidentes de un objeto jQuery se pueden iterar como una matriz (utilizando un bucle for o comandos como each([callback])).

Ahora vamos a echar un vistazo a la fuente de eq()

eq: function(i) { 
    return this.slice(i, +i + 1); 
}, 

vemos que eq() se logra mediante el comando slice() del objeto jQuery, por lo que también vamos a echar un vistazo a que

slice: function() { 
    return this.pushStack(Array.prototype.slice.apply(this, arguments), 
    "slice", Array.prototype.slice.call(arguments).join(",")); 
}, 

y también necesita mirar pushStack(), un comando usado bastante internamente

// Take an array of elements and push it onto the stack 
// (returning the new matched element set) 
pushStack: function(elems, name, selector) { 
    // Build a new jQuery matched element set 
    var ret = jQuery(elems); 

    // Add the old object onto the stack (as a reference) 
    ret.prevObject = this; 

    ret.context = this.context; 

    if (name === "find") 
    ret.selector = this.selector + (this.selector ? " " : "") + selector; 
    else if (name) 
    ret.selector = this.selector + "." + name + "(" + selector + ")"; 

    // Return the newly-formed element set 
    return ret; 
}, 

podemos ver que pushStack toma una matriz y devuelve un nuevo objeto jQuery. Los elementos que forman los elementos coincidentes del nuevo objeto jQuery se obtienen llamando al Function.apply en la función Array JavaScript slice y pasando el arguments de la función de corte jQuery como argsArray.

El comando get() por el contrario es más sencillo. Vamos a echar un vistazo a la fuente

// Get the Nth element in the matched element set OR 
// Get the whole matched element set as a clean array 
get: function(num) { 
    return num === undefined ? 

    // Return a 'clean' array 
    Array.prototype.slice.call(this) : 

    // Return just the object 
    this[ num ]; 
} 

llamada sin argumentos para el parámetro num, el objeto jQuery se convierte en una matriz, utilizando Function.call en la matriz de la función JavaScript slice. Si num se define, a continuación, el valor contenido en la propiedad correspondiente del objeto jQuery se devuelve, lo mismo que la siguiente

$([selector]).get(0) 

//is the same as 

$([selector])[0]