jQuery różnica między:eq () i: nth-child()
W jQuery, jakie są najważniejsze różnice między używaniem :eq () i: nth-child () do zaznaczania dowolnych elementów ?
Również ogólnie, dla indeksu początkowego, w którym to przypadku zaczyna się od "0", a kiedy zaczyna się od "1" ?
7 answers
:eq()
Wybierz element o indeksie n w dopasowanym zestawie.
Selektory powiązane z indeksami (:eq(), :lt(), :gt(), :even, :odd) filtrują zestaw elementów, które pasują do wyrażeń, które je poprzedzają. Zawężają zestaw w oparciu o kolejność elementów w tym dopasowanym zestawie. Na przykład, jeśli elementy są najpierw wybierane za pomocą selektora klas (.myclass) i zwracane są cztery elementy, elementy te otrzymują indeksy od 0 do 3 dla cele tych selektorów.
:nth-dziecko()
Wybiera wszystkie elementy, które są N-tym dzieckiem ich rodzica.
Ponieważ implementacja jQuery: nth-child (n) jest ściśle pochodną specyfikacji CSS, wartość n jest "1-indeksowana", co oznacza, że liczenie zaczyna się od 1. Jednak dla wszystkich innych wyrażeń selektora, jQuery podąża za JavaScript "0-indeksowane" liczenia. Dlatego, biorąc pod uwagę pojedynczy zawierający dwa
<li>s,$('li:nth-child(1)')wybiera pierwszy<li>podczas gdy$('li:eq(1)')wybiera drugi.Pseudoklasa :nth-child(n) jest łatwo mylona z :eq(n), nawet jeśli te dwa elementy mogą powodować dramatycznie różne dopasowane elementy. Z :nth-child( n), wszystkie dzieci są liczone, niezależnie od tego, czym są, A określony element jest wybierany tylko wtedy, gdy pasuje do selektora dołączonego do pseudo-klasy. Z :eq (n) liczony jest tylko selektor dołączony do pseudo-klasy, nie ograniczający się do dzieci jakiegokolwiek innego elementu, a (n+1)th jeden (N jest oparte na 0) jest wybrany.
Pseudoklasa :NTH-child(an+B) reprezentuje element, który ma rodzeństwo+b-1 przed nim w drzewie dokumentu, dla dowolnej dodatniej liczby całkowitej lub zerowej wartości n i ma element nadrzędny. Dla wartości a i b większych od zera, to skutecznie dzieli Potomków elementu na grupy elementów a (ostatnia grupa biorąca resztę), i wybierając element BTH z każdej grupy. Na przykład, pozwala to selektorom adresować co drugi wiersz tabeli i może być używany do zmiany koloru tekstu akapitu w cyklu czterech. Wartości a i b muszą być liczbami całkowitymi (dodatni, ujemny lub zerowy). Indeks pierwszego potomka elementu wynosi 1.
Oprócz tego,: nth-child() może zamiast tego przyjmować 'Nieparzyste' i 'Parzyste' jako argumenty. "nieparzyste" ma takie samo znaczenie jak 2n+1, A "parzyste" ma takie samo znaczenie jak 2n.
Dalsze omówienie tego niezwykłego zastosowania można znaleźć w Specyfikacja CSS W3C .
Szczegółowe Porównanie
Zobacz Demo: http://jsfiddle.net/rathoreahsan/sXHtB/ -- Link zaktualizowany
Zobacz też referencje
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-22 09:55:23
:nth-child()Selektor: wybiera wszystkie elementy, które są NTH-potomkiem ich rodzica.
:eq()Selektor: wybierz element o indeksie n w obrębie dopasowanego zestawu .
Zobacz: http://api.jquery.com/eq-selector/ i http://api.jquery.com/nth-child-selector/
Powodzenia.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-12 12:31:48
:eq() pozwala na dostęp do elementów w obiekcie jQuery przez indeks
Http://api.jquery.com/eq-selector/
:nth-child pozwala również na dostęp do elementu an przez indeks, jednak odnosi się tylko do terminu znajdującego się bezpośrednio po jego lewej stronie.
Http://api.jquery.com/nth-child-selector/
Oznacza to, że jeśli chcesz wybrać jeden element z selektora, użyj :eq, jeśli chcesz ograniczyć selekcje do elementów z N-1 poprzedzającymi-siberings następnie użyj NTH-child.
Tablice Javascript są zwykle indeksowane od 0; jednak nth-child jest indeksowany od 1, ponieważ jest technicznie właściwością CSS w przeciwieństwie do jQuery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-16 18:08:50
Eq () zaczyna się od 0, podczas gdy NTH-child () zaczyna się od 1
Zobacz różnice wyraźnie tutaj http://jsfiddle.net/9xu2R/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-12 12:28:47
$("#dataTable tr:nth-child(1) td:nth-child(2)").html();
Oto tabela
<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>
Selektor nth-child jquery pomoże Ci pobrać dokładne wartości komórek z tej tabeli. Praktyczny przykład, gdzie tr:nth-child(1) td:nth-child(2) pobiera 1,2 komórki tabeli.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-19 12:58:40
NTH-child wybiera nth potomek obiektu (- ów) nadrzędnego (- ych) inne wybiera N-Ten element w kolekcji (indeks zaczynający się od 0 LUB 1 jest tylko trywialną częścią różnicy). tak mówiąc tr td: NTH-child (5) wybiera każdy tr i dostaje ich 5-te dzieci, gdzie jako eq dostaje wszystkie TD we wszystkich trs i wybiera tylko 5-te TD ... Główną różnicą jest to. Rzeczywiście treść dokumentacji nie wskazuje na ten fakt prosto, ale garb słowa Jak to jest czarna magia ...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-21 11:37:20
:eq jest indeksowana, więc zaczyna się od 0. Nie jest również częścią specyfikacji Css.
Natomiast :nth-child jest częścią specyfikacji Css i odnosi się do pozycji elementu w drzewie DOM.
Jeśli chodzi o użycie, obie robią to samo.
Demo tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-12 12:31:31