jQuery:n selaus - end() -menetelmä

jQuery 遍历参考手册

Esimerkki

Valitaan kaikki kappaleet, löydetään näistä kappaleista span-elementit, ja ne palautetaan kappaleiksi, ja kappaleet asetetaan kahden pixelin punaiseksi reunaksi:

$("p").find("span").end().css("border", "2px red solid");

Kokeile itse

Määritelmä ja käyttö

end() -menetelmä lopettaa nykyisessä ketjussa olevan lähimmän suodatustoiminnon ja palauttaa match-elementtikokoelman aiempaan tilaan.

Syntaksi

.end()

Yksityiskohtainen selitys

Useimmat jQuery:n selausmenetelmät käsittelevät jQuery-objektin instanssia ja luovat uuden objektin, joka vastaa erilaisia DOM-elementtikokoelmia. Kun tämä tapahtuu, uusi elementtikokoelma tulisi lisätä objektiin säilytettävään pinoon. Jokaisen onnistuneen suodatusmenetelmän kutsuminen lisää uuden elementin pinoon. Jos tarvitsemme vanhan elementtikokoelman, voimme käyttää end() -metodia poistaa uuden kokoelman pinosta.

Oletetaan, että sivulla on pari lyhyttä luetteloa:

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

Esimerkki 1

jQuery:n ketjutusominaisuus (komentoketju) on hyödyllinen erityisesti, kun käytetään jQuery:n ketjutusominaisuutta. Jos ei käytetä ketjutusta, yleensä kutsutaan edellistä objektia muuttujan avulla, joten emme tarvitse käsitellä pilaalia. Kuitenkin end() voi yhdistää kaikki metodikutsut:

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

Kokeile itse

Tämä komentoketju hakee ensimmäisestä luettelosta projektit, joilla on nimi foo, ja asettaa niiden taustavärin punaiseksi. end() palauttaa objektin takaisin tilaan ennen find() -kutsua, joten toinen find() etsii '.bar' -elementtejä <ul class="first"> sisällä, ei <li class="foo"> elementeistä luettelossa, ja asettaa niiden taustavärin vihreäksi. Lopputuloksena ensimmäisen luettelon kohteet 1 ja 3 saavat värillisen taustan, mutta toisen luettelon kohteet eivät muutu.

Esimerkki 2

Tämä pitkä jQuery-ketju voidaan esittää rakenteellisena koodipalana, avataupi avaa sisäisen koodipalan, ja end()-menetelmä sulkee koodipalat:

$('ul.first').find('.foo')
  .css('background-color', 'red')
.end().find('.bar')
  .css('background-color', 'green')
.end();

Kokeile itse

Tämä viimeinen end() ei ole välttämätön, koska hylkäämme tämän jQuery-objektin pian. Kuitenkin, jos kirjoitat koodin tällä tavalla, end() tarjoaa visuaalisen symmetrian ja tekee ohjelmasta järjestelmällisemmän, ainakin kehittäjän näkökulmasta, vaikka hinnaksi tulee hieman suorituskyvyn menetys.

jQuery 遍历参考手册