MÉTODO JQUERY EACH()

O cada() O método em jQuery especifica uma função que é executada para cada elemento correspondente. É um dos métodos de deslocamento amplamente utilizados em JQuery. Usando este método, podemos iterar sobre os elementos DOM do objeto jQuery e executar uma função para cada elemento correspondente.

O cada() aceita um parâmetro função (índice, elemento) que é uma função de retorno de chamada executada para cada elemento selecionado. Esta função requer ainda opcionalmente dois parâmetros que são índice e elemento. Portanto, temos que passar uma função de retorno de chamada para o método each().

Também podemos retornar falso da função de retorno de chamada para interromper o loop antecipadamente.

Sintaxe

 $(selector).each(function(index, element))

Valores de parâmetros

Os valores dos parâmetros usados em cada() método são definidos como segue.

função (índice, elemento): É um parâmetro obrigatório. É uma função de retorno de chamada executada para cada elemento selecionado. Ele possui dois valores de parâmetros definidos a seguir.

índice:É um valor inteiro que especifica a posição do índice do seletor.elemento:É o elemento atual. Podemos usar esta palavra-chave para referir o elemento atualmente correspondente.

Vejamos algumas ilustrações para entender o cada() método claramente.

Exemplo 1

Neste exemplo, o cada() O método será acionado ao clicar no botão. Estamos aplicando esse método ao que elementos. Então, este método irá iterar sobre cada que elemento. A função é executada para cada selecionado que e exibe o texto do correspondente que elemento usando caixa de alerta.

Aqui, não estamos usando os valores dos parâmetros da função de retorno de chamada.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); }

Saída

Teste agora

Após a execução do código acima, a saída será -

Ao clicar no botão, um alerta será exibido conforme a seguir.

Da mesma forma, quatro caixas de alerta serão exibidas devido a quatro que elementos.

Exemplo2

Neste exemplo, estamos usando os valores dos parâmetros da função de retorno de chamada que são índice e elemento .

Estamos aplicando o cada() método ativado que elementos. Portanto, o método irá iterar sobre os elementos li começando no índice 0 . Ele será executado em cada selecionado que elemento e altere a cor de fundo do elemento correspondente.

A iteração para quando a função retorna falso . Aqui, há seis que elementos, e a função para quando chega ao elemento com id = 'i4' . Embora seja o quarto elemento, mas o índice começa em 0 , então a posição do elemento é 3 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); }