javascript - number - nth-child jquery ejemplos

jQuery diferencia entre: eq() y: nth-child()

Question

En jQuery, ¿cuáles son algunas de las diferencias clave entre usar: eq () y: nth-child () para seleccionar cualquier elemento?

También en general, para el índice de inicio, ¿en qué caso comienza desde "0" y cuando comienza desde "1"?

Answer 1

:nth-child() selector :nth-child() : selecciona todos los elementos que son el enésimo hijo de su padre.

:eq() selector :eq() : seleccione el elemento en el índice n dentro del conjunto coincidente .

Ver: http://api.jquery.com/eq-selector/ y http://api.jquery.com/nth-child-selector/

Buena suerte.

Answer 2

eq () comienza con 0, mientras que nth-child () comienza con 1

vea las diferencias claramente aquí http://jsfiddle.net/9xu2R/

Answer 3

nth-child selecciona el n-ésimo hijo de objeto (s) primario (s) otro selecciona n-ésimo elemento en una colección (el índice que comienza desde 0 o 1 es solo una parte trivial de la diferencia). por lo tanto, decir tr td: nth-child (5) selecciona cada tr y obtiene sus 5th children donde eq obtiene todos los tds en todas las trs y selecciona solo 5th td ... La principal diferencia es esa. De hecho, la redacción de la documentación no señala ese hecho en forma directa, pero desdice las palabras como si fuera magia negra ...

Answer 4

:eq() permite acceder a los elementos en el objeto jQuery por índice

http://api.jquery.com/eq-selector/

:nth-child también le permite acceder al elemento an por índice, sin embargo, solo se aplica al término a la izquierda inmediata.

http://api.jquery.com/nth-child-selector/

Esto significa que si desea elegir un elemento de un selector, utilice: eq si desea restringir las selecciones a elementos con n-1 precedente-sibilings y luego use nth-child.

Los arrays de Javascript usualmente se indexan desde 0; sin embargo, nth-child está indexado a partir de 1 porque técnicamente es una propiedad de CSS en comparación con un jQuery.

Answer 5

:eq es una matriz indexada, por lo que comienza desde 0. Tampoco forma parte de la especificación Css.

Considerando que :nth-child es parte de la especificación Css y se refiere a la posición del elemento en un árbol DOM.

En términos de uso, ambos hacen lo mismo.

Demo here

Answer 6

: eq ()

Seleccione el elemento en el índice n dentro del conjunto combinado.

Los selectores relacionados con el índice (: eq (),: lt (),: gt (),: even,: odd) filtran el conjunto de elementos que coinciden con las expresiones que los preceden. Estrechan el conjunto según el orden de los elementos dentro de este conjunto combinado. Por ejemplo, si los elementos se seleccionan por primera vez con un selector de clase (.myclass) y se devuelven cuatro elementos, a estos elementos se les asignan los índices 0 a 3 a los fines de estos selectores.

: enésimo hijo ()

Selecciona todos los elementos que son el enésimo hijo de su padre.

Debido a que la implementación de jQuery de: nth-child (n) se deriva estrictamente de la especificación CSS, el valor de n es "1-indexado", lo que significa que el recuento comienza en 1. Para todas las otras expresiones de selector, jQuery sigue el de JavaScript " 0-indexado "conteo. Por lo tanto, dado un solo que contiene dos <li> s, $(''li:nth-child(1)'') selecciona el primer <li> mientras $(''li:eq(1)'') selecciona el segundo.

La pseudoclase nth-child (n) se confunde fácilmente con: eq (n), aunque los dos pueden dar como resultado elementos emparejados dramáticamente diferentes. Con: nth-child (n), se cuentan todos los niños, independientemente de lo que sean, y el elemento especificado se selecciona solo si coincide con el selector adjunto a la pseudo-clase. Con: eq (n) solo el selector asociado a la pseudo-clase se cuenta, no se limita a los elementos secundarios de cualquier otro elemento, y se selecciona (n + 1) el uno (n está basado en 0).

La notación de pseudoclase n-child (an + b) representa un elemento que tiene an + b-1 hermanos antes que él en el árbol de documentos, para cualquier entero positivo o valor cero de n, y tiene un elemento padre. Para valores de ayb mayores que cero, esto efectivamente divide los elementos del elemento en grupos de elementos (el último grupo toma el resto) y selecciona el elemento bth de cada grupo. Por ejemplo, esto permite a los selectores abordar cada una de las otras filas en una tabla, y podría usarse para alternar el color del texto del párrafo en un ciclo de cuatro. Los valores a y b deben ser enteros (positivos, negativos o cero). El índice del primer hijo de un elemento es 1.

Además de esto,: nth-child () puede tomar ''impar'' y ''par'' como argumentos en su lugar. ''impar'' tiene la misma significación que 2n + 1, y ''par'' tiene la misma significación que 2n.

Puede encontrar más información sobre este uso inusual en la especificación W3C CSS .

Comparación detallada

Vea la demostración: http://jsfiddle.net/rathoreahsan/sXHtB/ - Enlace actualizado

Ver también las referencias

http://api.jquery.com/eq-selector/

http://api.jquery.com/nth-child-selector/

Answer 7

$("#dataTable tr:nth-child(1) td:nth-child(2)").html();

aquí dataTable es una tabla

<table id="dataTable" width="50%">
    <thead>
        <th>Name</th>
        <th>EnrollNo.</th>
    </thead>
    <tbody>
        <tr>
           <td>Somdip</td><td>IT001<td>
        </tr>
        <tr>
           <td>Sanyal</td><td>IT002<td>
        </tr>
    </tbody>
</table>

El selector nth-child de jquery lo ayudará a recuperar los valores exactos de celda de esta tabla. Un ejemplo práctico donde tr:nth-child(1) td:nth-child(2) obtiene las 1,2 celdas de la tabla.