Jak zdobyć n-ty element jQuery

311

W jQuery $("...").get(3)zwraca trzeci element DOM. Jaka jest funkcja zwracania trzeciego elementu jQuery?

jquery Sam Lee
źródło

Odpowiedzi:

310

Dlaczego nie przejrzeć najpierw (krótkiej) strony selektorów?

Oto on: :eq()operator. Jest używany tak jak get(), ale zwraca obiekt jQuery.

Możesz też użyć .eq()funkcji.

Dykam
źródło
23
Czy to nie powinno być .eq()zamiast :eq()?
RubenGeert
15
Tak, .eq()jest bardziej odpowiedni dla pytania PO. :eq()jest używany w parametrze ciągu do $, natomiast .eq()jest metodą na istniejącym obiekcie jQuery.
mjswensen
55
Przysięgam, że trzeba iść i szukać tego się każdy . singiel . czas .
ivarni
3
@JoelWorsham Zależy od pożądanego zachowania. $('select').find('option').eq(n)po prostu zignoruje grupowanie i uzyska wszystkie opcje jako całość. Jeśli chcesz na grupę, konieczne jest coś takiego:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
4
„Dlaczego nie przejrzysz najpierw (krótkiej) strony selektorów?” - Ponieważ „eq” to bardzo zła nazwa i regularnie
pomijam
309

Możesz użyć selektora : eq , na przykład:

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

Lub funkcja eq (int) :

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

Pamiętaj też, że indeksy są zerowane.

CMS
źródło
7
Jako synonim można również użyć :nth()selektora - nie należy mylić:nth-child()
user123444555621
Lepsza odpowiedź i nie edytowana 3 lata po fakcie :)
Andrew
dziękuję za wyjaśnienie, w jaki sposób korzystać z selektora / funkcji
Joseph Rogers,
49

jeśli masz kontrolę nad zapytaniem, które buduje obiekt jQuery, użyj :eq()

$("div:eq(2)")

Jeśli nie masz nad tym kontroli (na przykład, jest przekazywany z innej funkcji lub czegoś), użyj .eq()

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

Lub jeśli chcesz ich część (powiedzmy trzeci, czwarty i piąty element), użyj .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
pseudonim
źródło
Szukał kromki, ale nie był pewien, jak szukać. Dziękujemy za wyjście poza to, co jest wymagane w pierwotnym pytaniu.
Samik R
4
Dla osób, które natkną się na tę odpowiedź, warto zauważyć, że selektor n-tego dziecka jest oparty na 1, podczas gdy: eq lub .eq () są oparte na 0
Sudhanshu Mishra
1
Powinieneś użyć .eq()zamiast :eq()faktycznie. Niewielki wzrost wydajności.
Qwerty,
13

Myślę, że możesz tego użyć 

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

Znajduje drugie li w każdym dopasowanym ul i zapisuje je.

JoenasE
źródło
11

.eq () - Liczba całkowita wskazująca pozycję elementu na podstawie 0.

Dawny:

Rozważ stronę z prostą listą:

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

Możemy zastosować tę metodę do zestawu elementów listy:

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

Aby uzyskać więcej informacji: .eq ()

Tilak
źródło
3

Jeśli masz już obiekt jquery w zmiennej, możesz również traktować go jak zwykłą tablicę indeksowaną, bez użycia 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");
}

Chociaż powyższy przykład nie jest w żaden sposób przydatny, reprezentuje on, w jaki sposób można traktować obiekty utworzone przez jquery jako tablice indeksowane.

Au.Merci
źródło
Dobra i jeszcze jedna (miejmy nadzieję przydatna) wskazówka: jeśli wiersz zawiera listę <select>elementów, a chcesz wybrany element combobox, użyj$(row).val();
Matt
2

Jeśli dobrze rozumiem twoje pytanie, zawsze możesz po prostu owinąć funkcję get w następujący sposób:

var $someJqueryEl = $($('.myJqueryEls').get(3));
użytkownik1205577
źródło
3
To tylko „trudna droga” i to eq()daje ci za darmo.
Caumons
1

Jeśli chcesz pobrać konkretny element / węzeł lub tag w pętli np

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

Tak więc, z powyższej pętli kodu jest wykonywana i chcemy, aby wybrane pole było wybrane, dlatego musimy użyć wyboru jQuery, który może wybrać tylko element oczekujący z powyższej pętli, więc kod będzie

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

na przykład

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

jak również inną metodą

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

ale pierwsza metoda jest bardziej wydajna, gdy HTML <tag>ma unikalną nazwę klasy.

UWAGA: Drugą metodę stosuje się, gdy nie ma ona nazwy klasy w elemencie docelowym lub węźle.

Aby uzyskać więcej, odwiedź https://api.jquery.com/eq/

Vrushal Raut
źródło
0

W przypadku iteracji użycie selektora nie wydaje się jednak mieć żadnego sensu:

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
   // ...
}

źródło
0

Przykład na żywo, aby uzyskać dostęp i usunąć N-ty element za pomocą 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>

Po uruchomieniu na liście uporządkowanej znajdują się dwa elementy: Pierwszy i Trzeci. Drugi był ukryty.

Eric Leschinski
źródło
PS: Liczenie zaczyna się od 0; Pierwszy jest w indeksie 0, drugi w indeksie 1 i tak dalej ...
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
źródło
„$ (function () {” najpierw jesienią, stworzyłem anonimową funkcję, która uruchomiła się automatycznie. Wewnątrz znalazłem trzy rodzicielskie div przy użyciu rodzeństwa. Następnie wykonałem iterację we wszystkich 3 rodzicielskich divach i sprawdziłem długość każdej długości dziecka. Jak mogę rozpoznać, czy jest to ostatnia dywizja, czy nie w rodzicielskiej dywizji. Teraz ostrzegam html ostatniej dywizji o 3 głównych dywizjach rodzicielskich
Sanjay Verma
Możesz edytować swoją odpowiedź zamiast podawać informacje w komentarzach :)
T3 H40