jQuery-beschrijving - end() methode

jQuery Traversing Reference Manual

Voorbeeld

Selecteer alle paragrafen, vind de span-elementen in deze paragrafen en maak ze weer paragrafen, en stel de paragrafen in met een rode rand van twee pixels:

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

Probeer het zelf uit

Definitie en gebruik

De end() methode beëindigt de meest recente filteractie in de huidige keten en herstelt de overeenkomende elementverzameling naar de vorige staat.

Syntaxis

.end()

Uitleg

De meeste jQuery-beschrijvende methoden werken met een jQuery-objectvoorbeeld en genereren een nieuwe objectverzameling die overeenkomt met verschillende DOM-elementen. Als dit gebeurt, moet de nieuwe elementverzameling worden bijgevoegd aan de stack die in het object wordt onderhouden. Elke succesvolle filtermethode-aanroep voegt een nieuw element toe aan de stack. Als we de oude elementverzameling nodig hebben, kunnen we de nieuwe verzameling uit de stack halen met end().

Stel dat er op de pagina een paar korte lijsten zijn:

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

Voorbeeld 1

Het is vooral nuttig om jQuery's kettingeigenschappen (opdrachtketting) te gebruiken, omdat jQuery dan zeer nuttig is. Als je geen opdrachtketting gebruikt, roepen we meestal eerdere objecten aan via variabelenamen, zodat we geen stak hoeven te manipuleren. Maar met end() kunnen we alle methodaanroepen samen voegen:

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

Probeer het zelf uit

Deze opdrachtketting zoekt naar de eerste lijst naar items met de klasse foo en stelt hun achtergrond in op rood. end() keert het object terug naar de staat voordat find() werd aangeroepen, dus de tweede find() zoekt naar '.bar' binnen <ul class="first"> en niet naar <li class="foo">, en stelt de achtergrond van de overeenkomende elementen in op groen. Het uiteindelijke resultaat is dat de items 1 en 3 in de eerste lijst een gekleurde achtergrond krijgen, terwijl er in de tweede lijst geen veranderingen optreden.

Voorbeeld 2

Deze lange jQuery-ketting kan worden weergegeven als een gestructureerde codeblok, de methode om een geneste codeblok te openen, en de end()-methode wordt gebruikt om de codeblokken te sluiten:

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

Probeer het zelf uit

Deze end() is niet noodzakelijk, omdat we deze jQuery-object later zullen weggooien. Als je echter code op deze manier schrijft, biedt end() een visuele symmetrie en een nettere programmacode, tenminste voor ontwikkelaars gemakkelijker leesbaar, maar er is een prijskaartje: er is een beetje prestatieverlies omdat er extra aanroepen worden gedaan.

jQuery Traversing Reference Manual