jQuery-browsing - eq() metode

Eksempel

Gennem at tilføje en passende klasse til div med index 2, gør den blå:

$("body").find("div").eq(2).addClass("blue");

Prøv det selv

Definition og brug

eq() metoden reducerer matchende elementindsamling til én baseret på den angivne index.

Syntaks

.eq(index)
Parameter Beskrivelse
index

Et heltal, der indikerer elementets position (minimalt 0).

Er det et negativt tal, tælles der tilbage fra den sidste element i sætningen.

Detaljeret forklaring

Hvis en jQuery-objekt, der repræsenterer en DOM-elementindsamling, gives, bruger .eq() metoden en element fra sætningen til at konstruere et nyt jQuery-objekt. Den brugte index parameter indikerer elementets position i sætningen.

Se nedenstående enkle liste:

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

Eksempel 1

Vi kan anvende denne metode på denne listeemneindsamling:

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

Prøv det selv

Resultatet af denne kald er at sætte projekt 3's baggrund til rød. Bemærk, at index er baseret på 0 og refererer til elementets position i jQuery-objektet, ikke i DOM-træet.

Eksempel 2

Hvis et negativt tal gives, indikerer det en position fra slutningen af sætningen, ikke fra begyndelsen. For eksempel:

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

Prøv det selv

Denne gang bliver projekt 4's baggrund farvet rød, fordi det er den anden fra slutningen af sætningen.

Eksempel 3

Hvis metoden ikke kan finde elementet baseret på den angivne index parameter, konstruerer den en jQuery-objekt med en tom samling, hvor length-attributten er 0.

$('li').eq(5).css('background-color', 'red');

Prøv det selv

Her, ingen listeemner bliver røde, fordi .eq(5) indikerer det sjette listeemne.