Trabalhando com o método each no jQuery

Quando temos um grupo de elementos obtidos com jQuery, só podemos fazer alterações neles para todos os elementos simultaneamente.

Por exemplo, se quisermos alterar o texto de todos os parágrafos encontrados - não conseguiremos torná-lo diferente para cada um.

Neste caso, o método especial each nos ajuda, permitindo aplicar uma função a todos os elementos de um conjunto jQuery. Dentro desta função, podemos distinguir os elementos e agir de forma diferente com cada um deles.

Essencialmente, each é um loop que pode iterar sobre todos os elementos encontrados. A referência ao elemento atual do loop estará em this.

Podemos simplesmente usar este this em JavaScript puro, como fizemos antes, por exemplo, assim - this.innerHTML - e exibir o conteúdo interno dos nossos elementos. Mas é melhor envolver this no cifrão do jQuery assim - $(this) - neste caso, poderemos aplicar a ele todos os métodos e cadeias do jQuery.

Vamos considerar o seguinte código HTML:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Neste exemplo, devemos obter todos os elementos com a classe www e exibir seu conteúdo. Como é feito: com $('.www') obtemos os elementos que precisamos, depois com each(test) aplicamos a função test a cada elemento obtido. Ela será aplicada primeiro ao primeiro parágrafo, depois ao segundo, ao terceiro e assim por diante.

Dentro da função, this irá apontar para o elemento ao qual a função test está sendo aplicada - primeiro será o primeiro elemento, depois o segundo, e assim por diante. Com uma construção como $(this), em vez de um this JavaScript comum, obteremos um elemento jQuery e aplicaremos a ele o método html, que obterá o texto do nosso elemento. Bem, e então ele simplesmente será exibido na tela:

javascript/*
  Escrevemos o nome da função test sem aspas e (),
  porque precisamos do seu código, e não do resultado:
*/

$('.www').each(test);

function test() {
  alert($(this).html());
}

Para resolver esta tarefa, também podemos usar funções anônimas - isso é feito com mais frequência:

javascript$('.www').each(function() {
  alert($(this).html());
});

Também podemos passar para o método each uma função de callback com parâmetros.

Vamos no próximo exemplo adicionar no final de todos os li na página o seu número de ordem. Agora em nossa função anônima passaremos o índice do elemento e o próprio elemento:

javascript$('li').each(function (index, elem) {
  $(elem).append(index);
});

E agora, em vez de elem, usamos this:

javascript$('li').each(function (index) {
  $(this).append(index);
});