web-dev-qa-db-de.com

jQuery Unterschied zwischen: eq () und: nth-child ()

Was sind in jQuery die wichtigsten Unterschiede zwischen der Verwendung von: eq () und: nth-child (), um Elemente auszuwählen?

Auch im Allgemeinen für den Startindex: In welchem ​​Fall beginnt er mit "0" und wann beginnt er mit "1"?

31
testndtv

: eq ()

Wählen Sie das Element am Index n innerhalb der übereinstimmenden Menge aus.

Die indexbezogenen Selektoren (: eq (),: lt (),: gt (),: even,: odd) filtern die Menge der Elemente, die den vorausgegangenen Ausdrücken entsprechen. Sie beschränken den Satz basierend auf der Reihenfolge der Elemente innerhalb dieses übereinstimmenden Satzes. Wenn zum Beispiel Elemente zuerst mit einem Klassenselektor (.myclass) ausgewählt werden und vier Elemente zurückgegeben werden, erhalten diese Elemente für diese Selektoren die Indizes 0 bis 3.

: nth-child ()

Wählt alle Elemente aus, die das n-te Kind ihres übergeordneten Elements sind.

Da die Implementierung von: nth-child (n) von jQuery streng von der CSS-Spezifikation abgeleitet ist, ist der Wert von n "1-indexiert". Dies bedeutet, dass die Zählung bei 1 beginnt. Für alle anderen Selektorausdrücke folgt jQuery jedoch "" 0-indizierte "Zählung. Daher gibt $('li:nth-child(1)') bei einer Single mit zwei <li>s den ersten <li> an, während $('li:eq(1)') den zweiten auswählt.

Die: nth-child (n) -Pseudoklasse lässt sich leicht mit: eq (n) verwechseln, auch wenn die beiden Elemente zu dramatisch unterschiedlichen Elementen führen können. Mit: nth-child (n) werden alle untergeordneten Elemente gezählt, und das angegebene Element wird nur ausgewählt, wenn es mit dem der Pseudoklasse zugeordneten Selektor übereinstimmt. Mit: eq (n) wird nur der an die Pseudoklasse angefügte Selektor gezählt, nicht auf untergeordnete Elemente eines anderen Elements, und der (n + 1) -te (n ist 0-basiert) wird ausgewählt.

Die Pseudoklassennotation: nth-child (an + b) stellt ein Element dar, das in der Dokumentstruktur ein gleichgeordnetes + b-1 enthält, für eine beliebige positive Ganzzahl oder einen Nullwert von n und ein übergeordnetes Element. Bei Werten von a und b größer als Null werden die untergeordneten Elemente des Elements effektiv in Gruppen von Elementen unterteilt (die letzte Gruppe nimmt den Rest ein) und wählt das b-te Element jeder Gruppe aus. Dies ermöglicht beispielsweise, dass die Selektoren jede zweite Zeile in einer Tabelle adressieren, und sie könnten verwendet werden, um die Farbe des Absatztextes in einem Zyklus von vier zu ändern. Die Werte von a und b müssen Ganzzahlen sein (positiv, negativ oder null). Der Index des ersten untergeordneten Elements eines Elements ist 1.

Zusätzlich kann: nth-child () stattdessen "ungerade" und "gerade" als Argumente verwenden. "Ungerade" hat dieselbe Bedeutung wie 2n + 1 und "gerade" hat dieselbe Bedeutung wie 2n. 

Weitere Erläuterungen zu dieser ungewöhnlichen Verwendung finden Sie in der W3C CSS-Spezifikation .

Detailvergleich

Siehe Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ - Link aktualisiert

Siehe auch die Referenzen 

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

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

54
Ahsan Rathod

:nth-child() Selector: Wählt alle Elemente aus, die das n-te {child ihres übergeordneten Elements sind.

:eq() Selector: Wählen Sie das Element am Index n innerhalb von übereinstimmende Menge aus.

Siehe: http://api.jquery.com/eq-selector/ und http://api.jquery.com/nth-child-selector/

Viel Glück.

13
defuz

Mit :eq() können Sie auf die Elemente im jQuery-Objekt über den Index zugreifen 

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

:nth-child ermöglicht Ihnen auch den Zugriff auf ein Element über den Index. Dies gilt jedoch nur für den Begriff, der sich unmittelbar links davon befindet.

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

Wenn Sie also ein Element aus einem Selektor auswählen möchten, verwenden Sie: eq, wenn Sie die Auswahl auf Elemente mit n-1-vorangestellten Sibilings beschränken möchten, und verwenden Sie dann nth-child.

Javascript-Arrays werden normalerweise von 0 indiziert. nth-child wird jedoch von 1 indiziert, da es sich technisch um eine CSS-Eigenschaft im Gegensatz zu einer jQuery-Eigenschaft handelt.

7
MikeBaker

eq () beginnt mit 0, während nth-child () mit 1 beginnt

unterschiede hier deutlich sehen http://jsfiddle.net/9xu2R/

0
JSantos

CSS: first-child,: nth-child und: last-child sind nicht wie: eq 

Wenn wir also einen HTML-Ausschnitt hätten

<div>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

Dann stimmt der Selektor .foo: nth-child (2) mit der div # -Liste2 überein. Wenn wir ein anderes Element an der Vorderseite des Containers einfügen:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

Und wieder wählen wir .foo: nth-child (2) aus, wir passen die div # -Liste1 an, da das 2. Kind des Containers ebenfalls mit .foo übereinstimmt.

Wenn wir also in diesem zweiten Beispiel .foo: nth-child (1) oder das entsprechende .foo: first-child versuchen, werden wir keine Elemente zuordnen, da das erste untergeordnete Element in diesem Container - das p-Tag - nicht geeignet ist Spiel .foo.

Ebenso kann: nth-child mit Kindern in mehreren Containern übereinstimmen. Im HTML-Snippet:

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

<div>
     <div id="quux" class="foo"></div>
</div>

der Selektor .foo: last-child passt zu den divs # bar3 und #quux; aber .foo: first-child oder .foo: nth-child (1) stimmt nur mit #quux überein, da das erste untergeordnete Element des ersten Containers wiederum kein .foo ist.

Quelle https://content.pivotal.io/blog/css-first-child-nth-child-and-last-child-are-not-like-eq

0
Phuc Nguyen

n-te Kind wählt das n-te Kind des übergeordneten Objekts (s) aus, anderes wählt das n-te Element in einer Auflistung aus (der Index, der bei 0 oder 1 beginnt, ist nur ein unbedeutender Teil der Differenz). 5) wählt jedes tr aus und erhält seine fünften Kinder, während eq alle tds in allen trs erhält und nur das fünfte td auswählt ... Der Hauptunterschied besteht darin. Tatsächlich weist der Wortlaut der Dokumentation nicht darauf hin, sondern verwirrt die Worte wie schwarze Magie ...

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

hier ist dataTable eine Tabelle 

<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>

Der nth-child-Selektor von jquery hilft Ihnen, die genauen Zellenwerte aus dieser Tabelle abzurufen. Ein praktisches Beispiel, bei dem tr:nth-child(1)td:nth-child(2) die 1,2-Zelle der Tabelle abruft. 

0
somdip