jQuery Parcours - méthode end()

Guide de parcoulement jQuery

Exemple

Sélectionnez tous les paragraphes, trouvez les éléments span dans ces paragraphes, puis les ramenez à l'état de paragraphes et définissez les paragraphes avec un cadre rouge de 2 pixels.

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

Essayez-le vous-même

Définition et utilisation

La méthode end() termine l'opération de filtrage la plus récente de la chaîne actuelle et rétablit l'ensemble des éléments correspondants à l'état précédent.

Syntaxe

.end()

Explication détaillée

La plupart des méthodes de parcours jQuery opèrent sur une instance d'objet jQuery et génèrent un nouveau jQuery objet qui correspond à un ensemble d'éléments DOM différents. Lorsque cela se produit, il faudrait ajouter le nouveau ensemble d'éléments à la pile maintenue dans l'objet. Chaque appel de méthode de filtrage réussi ajoute un nouvel élément à la pile. Si nous avons besoin de l'ancien ensemble d'éléments, nous pouvons utiliser end() pour enlever le nouveau ensemble de la pile.

Supposons que la page contienne une paire de listes courtes :

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

Exemple 1

jQuery est particulièrement utile lorsque vous utilisez les propriétés de chaîne de commandes (chaîne de commandes). Si vous ne n'utilisez pas la chaîne de commandes, nous appelons généralement l'objet précédent par le nom de la variable, de sorte que nous n'avons pas besoin de manipuler le stack. Cependant, avec end(), nous pouvons chaîner toutes les appels de méthode :

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

Essayez-le vous-même

Cette chaîne de commandes recherche les éléments avec la classe foo dans la première liste et change leur couleur de fond en rouge. La méthode end() rétablit l'état de l'objet à l'état avant l'appel de find(), donc le deuxième find() cherche '.bar' à l'intérieur de <ul class="first">, et non dans <li class="foo"> de la liste, et change le fond des éléments correspondants en vert. Le résultat final est que les éléments 1 et 3 de la première liste ont un fond coloré, tandis que les éléments de la deuxième liste ne sont pas modifiés.

Exemple 2

Cette longue chaîne jQuery peut être visualisée sous forme de blocs de code structurés. Ouvrez les blocs de code imbriqués avec les méthodes de filtrage, et utilisez la méthode end() pour fermer les blocs :

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

Essayez-le vous-même

La méthode end() n'est pas obligatoire, car nous allons ensuite jeter cet objet jQuery. Cependant, si vous écrivez le code de cette manière, end() peut fournir une symétrie visuelle et un sentiment de régularité au programme, au moins pour le développeur, ce qui est certainement plus facile à lire. Cependant, le coût en est une légère perte de performance due à des appels supplémentaires.

Guide de parcoulement jQuery