jQuery.each()

On 9 de outubro de 2014, in JavaScript, jQuery, by andersonstraube

Neste post pretendo explicar um pouco da utilização da função each() presente no jQuery. Esta é sem dúvida uma das funções mais utilizadas e mais úteis do jQuery.

Basicamente, a função each() é usada para manipulação de elementos DOM, loop de array’s, propriedades de objetos, entre outros…

Veremos alguns exemplos práticos onde a utilização dela é útil.

Percorrendo elementos do DOM:

Temos o seguinte html:


<div id="exemplo1">
	<div id="um"> </div>
	<div id="dois"> </div>
	<div id="tres"> </div>
	<div id="quatro"> </div>
	<div id="cinco"> </div>
</div>

Queremos percorrer cada div dentro de “exemplo1″ e exibir seu id:


$("#exemplo1 > div").each( function(index, value) { 
	console.log( 'div: ' + $(this).attr('id') ); 
});

A saída será:

div: um
div: dois
div: tres
div: quatro
div: cinco

Percorrendo links:


<div id="exemplo2">
	<a href="http://www.site1.com.br">Link 1</a>		
	<a href="http://www.site2.com.br">Link 2</a>		
	<a href="http://www.site3.com.br">Link 3</a>		
</div>

Exemplo 2:


$("#exemplo2 > a").each( function(index, value) { 
	console.log( $(this).html() + ' -> ' + $(this).attr('href')  ); 
});

A saída será:

Link 1 -> http://www.site1.com.br
Link 2 -> http://www.site2.com.br
Link 3 -> http://www.site3.com.br

Percorrendo array:


var arrayElementos = [0,1,2,3,4,5];

jQuery.each(arrayElementos , function(index, value){
     console.log('[' + index + '] - ' + value); 
});

A saída será:

[0] – 0
[1] – 1
[2] – 2
[3] – 3
[4] – 4
[5] – 5

Percorrendo JSON:


var jsonPessoa = [ 
    { "nome": 		"Joãozinho" },
    { "sobrenome":  "Silva" },
    { "cidade": 	"Balneário Camboriú" },
    { "estado": 	"SC" },
];
  
$.each(jsonPessoa, function() {
	$.each(this, function(index, value) {
		console.log(index + '=' + value);
	}); 
});

A saída será:

nome=Joãozinho
sobrenome=Silva
cidade=Balneário Camboriú
estado=SC

Exemplo completo:


<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="scripts.js"></script>
</head>
<body>

	<div id="exemplo1">
		<div id="um"> </div>
		<div id="dois"> </div>
		<div id="tres"> </div>
		<div id="quatro"> </div>
		<div id="cinco"> </div>
	</div>
	
<div id="exemplo2">
	<a href="http://www.site1.com.br">Link 1</a>		
	<a href="http://www.site2.com.br">Link 2</a>		
	<a href="http://www.site3.com.br">Link 3</a>		
</div>	

</body>
</html>

// scripts.js


$(document).ready(function()
{
	console.log("===========[ EXEMPLO 1 - percorrer div ]===========");
	
	$("#exemplo1 > div").each( function(index, value) { 
		console.log( 'div: ' + $(this).attr('id') ); 
	});	
	
	
	console.log("===========[ EXEMPLO 2 - percorrer link ]===========");
	
	$("#exemplo2 > a").each( function(index, value) { 
		console.log( $(this).html() + ' -> ' + $(this).attr('href')  ); 
	});	
	
	
	console.log("===========[ EXEMPLO 3 - array ]=============");
	
	var arrayElementos = [0,1,2,3,4,5];
	jQuery.each(arrayElementos , function(index, value){
	     console.log('[' + index + '] - ' + value); 
	});
	
	console.log("============[ EXEMPLO 4 - JSON ]============");

	var jsonPessoa = [ 
	    { "nome": 		"Joãozinho" },
	    { "sobrenome":  "Silva" },
	    { "cidade": 	"Balneário Camboriú" },
	    { "estado": 	"SC" },
	];
	  
	$.each(jsonPessoa, function() {
		$.each(this, function(index, value) {
			console.log(index + '=' + value);
		}); 
	});
});

Simples não?!

Vale lembrar que $.each() e $(seletor).each() são internamente definidos de maneira diferente, uma utiliza o jQuery.each e outra é através do jquery.fn.each.

Até a próxima, abraço.

Tagged with:  

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *