Iteración de jQuery - método end()

Manual de referencias de jQuery para la recorrida

Ejemplo

Seleccione todos los párrafos, encuentre los elementos span dentro de estos párrafos y luego devuelvalos a párrafos, configurando los párrafos con un borde rojo de 2 píxeles:

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

Pruebe personalmente

Definición y uso

El método end() termina la operación de filtrado más reciente en la cadena actual y restablece el conjunto de elementos coincidentes a su estado anterior.

Sintaxis

.end()

Explicación detallada

La mayoría de los métodos de iteración de jQuery operan sobre una instancia de objeto jQuery y generan un nuevo objeto que coincide con un conjunto de elementos DOM diferente. Cuando ocurre esto, debe insertar el nuevo conjunto de elementos en la pila mantenida en el objeto. Cada llamada exitosa del método de filtrado insertará el nuevo elemento en la pila. Si necesitamos el conjunto de elementos viejos, podemos usar end() para expulsar el nuevo conjunto de la pila.

Supongamos que en la página hay un par de listas cortas:

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

Ejemplo 1

Principalmente, jQuery es útil cuando se utiliza la propiedad de cadena de comandos (cadena de comandos). Si no se utiliza la cadena de comandos, generalmente se llama al objeto anterior mediante el nombre de la variable, de modo que no es necesario manipular la pila. Sin embargo, mediante end(), podemos conectar todas las llamadas a métodos:

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

Pruebe personalmente

Esta cadena de comandos busca los elementos con la clase foo en la primera lista y establece su fondo en rojo. end() devuelve el objeto a su estado anterior antes de llamar a find(), por lo que el segundo find() busca '.bar' dentro de <ul class="first"> y no dentro de <li class="foo">, estableciendo el fondo de los elementos coincidentes en verde. Como resultado, los elementos 1 y 3 de la primera lista tienen un fondo coloreado, mientras que los elementos de la segunda lista no experimentan cambios.

Ejemplo 2

Esta larga cadena de jQuery se puede visualizar como un bloque de código estructurado, donde el método de filtrado abre los bloques de código anidados y el método end() se utiliza para cerrar los bloques de código:

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

Pruebe personalmente

Finalmente, este end() no es obligatorio, ya que luego desecharemos este objeto jQuery. Sin embargo, si se escribe el código de esta manera, end() puede proporcionar un equilibrio visual y una sensación de orden en el programa, al menos para los desarrolladores, lo que conlleva un costo en términos de pérdida de rendimiento debido a las llamadas adicionales.

Manual de referencias de jQuery para la recorrida