Iteração do jQuery - método end()

Manual de referência de iteração do jQuery

Exemplo

Selecione todos os parágrafos, encontre os elementos span nestes parágrafos e reverta-os para parágrafos, definindo a borda vermelha de dois pixels para os parágrafos:

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

Experimente pessoalmente

Definição e uso

O método end() termina a operação de filtragem mais recente na cadeia atual e restaura o conjunto de elementos coincidentes para o estado anterior.

Sintaxe

.end()

Explicação detalhada

A maioria dos métodos de iteração do jQuery opera sobre uma instância de objeto jQuery e gera um novo objeto que coincide com um conjunto de elementos DOM diferentes. Quando isso acontece, deve-se empilhar o novo conjunto de elementos no pilha mantida no objeto. Cada chamada de método de filtragem bem-sucedida empilha novos elementos na pilha. Se precisarmos do conjunto de elementos antigo, podemos usar end() para desempilhar o novo conjunto da pilha.

Suponha que na página haja um par de listas curtas:

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

Exemplo 1

O jQuery é especialmente útil quando se utiliza a propriedade de cadeia de comandos (cadeia de comandos). Sem a cadeia de comandos, geralmente chamamos o objeto anterior pelo nome da variável, evitando assim a manipulação da pilha. No entanto, através do end(), podemos concatenar todas as chamadas de métodos:

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

Experimente pessoalmente

Este comando de cadeia busca o primeiro item da lista com a classe foo e define a cor de fundo como vermelha. O end() restaura o objeto ao estado antes da chamada find(), então a segunda chamada find() busca '.bar' dentro de <ul class="first">, não dentro do <li class="foo">, e define a cor de fundo dos elementos correspondentes como verde. O resultado final é que os itens 1 e 3 da primeira lista têm o fundo colorido, enquanto os itens da segunda lista não sofrem nenhuma mudança.

Exemplo 2

Esta longa cadeia de jQuery pode ser visualizada como um bloco de código estruturado, onde o método de filtragem abre o bloco de código aninhado e o método end() fecha o bloco de código:

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

Experimente pessoalmente

Este end() não é necessário, pois descartaremos este objeto jQuery posteriormente. No entanto, se escrevermos o código dessa forma, o end() pode proporcionar uma simetria visual e uma sensação de ordem no código, pelo menos para os desenvolvedores, embora o custo seja uma pequena perda de desempenho devido a chamadas adicionais.

Manual de referência de iteração do jQuery