jQuery-selailu - eq()-metodi

Esimerkki

Lisäämällä luokan index-tilaan 2 olevaan div:hen, muutetaan se siniseksi:

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

Kokeile itse

Määritelmä ja käyttö

eq()-metodi supistaa vastaamaan elementtikokoelman tiettyyn index-tilaan.

Syntaksi

.eq(index)
Parametri Kuvaus
index

Tuplana, joka viittaa elementin sijaintiin (minimi 0).

Jos se on negatiivinen, se laskee takaperin kokoelman viimeisestä elementistä.

Yksityiskohtainen selitys

Jos annetaan jQuery-objekti, joka edustaa DOM-elementtien kokoelmaa, .eq()-metodi luo uuden jQuery-objektin kokoelman yhdestä elementistä. Käytetty index-argumentti määrittää elementin sijainnin kokoelmassa.

Katso seuraava yksinkertainen luettelo:

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

Esimerkki 1

Voimme soveltaa tätä metodia tähän luetteloelementtien kokoelmaan:

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

Kokeile itse

Tämän kutsun tuloksena projektin 3 tausta asetetaan punaiseksi. Huomaa, että index on nollaperustainen ja se viittaa elementin sijaintiin jQuery-objektissa, ei DOM-puussa.

Esimerkki 2

Jos annetaan negatiivinen luku, se viittaa sijaintiin kokoelman lopusta alkaen, ei alkuperästä.

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

Kokeile itse

Tällä kertaa, projektin 4 tausta muuttuu punaiseksi, koska se on toinen alusta laskien.

Esimerkki 3

Jos elementtiä ei löydy annetulla index-argumentilla, tämä metodi luo tyhjän jQuery-objektin, jonka length-ominaisuus on 0.

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

Kokeile itse

Tässä, mikään luettelo ei muutu punaiseksi, koska .eq(5) viittaa kuudennelle luetteloelementille.