JQuery Each

jQuery.
each()
Neste post pretendo explicar um pouco da utilizao da funo each() presente no jQuery. Esta
sem dvida uma das funes mais utilizadas e mais teis do jQuery.
Basicamente, a funo each() usada para manipulao de elementos DOM, loop de arrays,
propriedades de objetos, entre outros
Veremos alguns exemplos prticos onde a utilizao 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 sada 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>
</div>

$("#exemplo2 > a").each( function(index, value) {
console.log( $(this).html() + ' -> ' + $(this).attr('href') );
});
A sada ser:
Link 1 -> http://www.site1.com.br
Percorrendo array:

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

jQuery.each(arrayElementos , function(index, value){
console.log('[' + index + '] - ' + value);
});
A sada ser:
[0] 0
[1] 1
[2] 2
[3] 3
[4] 4
[5] 5
Percorrendo JSON:

var jsonPessoa = [
{"nome":"Joozinho"},
{"sobrenome":"Silva"},
{"cidade":"Balnerio Cambori"},
{"estado":"SC"},
];

$.each(jsonPessoa, function() {
$.each(this, function(index, value) {
console.log(index + '=' + value);
});
});
A sada ser:
nome=Joozinho
sobrenome=Silva
cidade=Balnerio 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">
</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":"Joozinho" },
{ "sobrenome":"Silva" },
{ "cidade":"Balnerio Cambori" },
{ "estado":"SC" },
];

$.each(jsonPessoa, function() {
$.each(this, function(index, value) {
console.log(index + '=' + value);
});
});
});
Simples no?!
Vale lembrar que $.each() e $(seletor).each() so internamente definidos de maneira diferente, uma
utiliza o jQuery.each e outra atravs do jquery.fn.each.

JQuery Each

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JQuery Each

Загружено:

Авторское право:

Доступные форматы

jQuery.

Вам также может понравиться