4 примера использования jQuery функции each()

Это расширенный осмотр функции JQuery.each(). Это одна из самых используемых функций в JQuery, по-этому я решил описать эту функцию.

Во-первых, что такое  JQuery.each(). 

 JQuery.each() функция используется для прохождения через элементы обьектов, это могут быть массивы или элементы DOM. 

Синтаксис  JQuery.each().


//DOM ELEMENTS
$("div").each(function(index, value) { 
    console.log('div' + index + ':' + $(this).attr('id')); 
});
//outputs the ids of every div on the web page
//ie - div1:header, div2:body, div3:footer
 
//ARRAYS
var arr = [ "one", "two", "three", "four", "five" ];
jQuery.each(arr, function(index, value) {
       console.log(this);
       return (this != "three"); // will stop running after "three"
   });
//outputs: one two three
 
//OBJECTS
var obj = { one:1, two:2, three:3, four:4, five:5 };
    jQuery.each(obj, function(i, val) {
       console.log(val);
    });
//outputs: 1 2 3 4 5

1. Базовый случай использования  JQuery.each(). 


$('a').each(function(index, value){
      console.log($(this).attr('href'));
});
//outputs: every links href element on your web page
 
$('a').each(function(index, value){
    var ihref = $(this).attr('href');
    if (ihref.indexOf("http") >= 0) 
    {
        console.log(ihref+'
'); } }); //outputs: every external href on your web page

эсли вы имеете следующие ссылки где-то на страничке

<a href="http://www.jquery4u.com">JQUERY4U</a>
<a href="http://www.phpscripts4u.com">PHP4U</a>
<a href="http://www.blogoola.com">BLOGOOLA</a>'

тогда вы увидете следующее

http://jquery4u.com
http://www.phpscripts4u.com
http://www.blogoola.com

2. JQuery.each(). Пример с массивами.

var numberArray = [0,1,2,3,4,5];
jQuery.each(numberArray , function(index, value){
     console.log(index + ':' + value); 
});
//outputs: 1:1 2:2 3:3 4:4 5:5

3. JQuery.each(). Пример с JSON обьектом.


(function($) {
var json = [ 
    { "red": "#f00" },
    { "green": "#0f0" },
    { "blue": "#00f" }
];
$.each(json, function() {
  $.each(this, function(name, value) {
    /// do stuff
    console.log(name + '=' + value);
  });
});
//outputs: red=#f00 green=#0f0 blue=#00f
})(jQuery);

4. JQuery.each(). Пример с HTML классами.

Этот пример показывает вам как пройти через все элементы, которые имеют класс class=”productDescription”.

Вы не должны передавать параметры index и value в функцию, это только параметры для примера, что бы определить какой элемент DOM вы сейчас проходите. Вы так же можете проходить элементы следующим образом: 

<div class="productDescription">Red</div>
<div class="productDescription">Orange</div>
<div class="productDescription">Green</div>
$.each($('.productDescription'), function(index, value) { 
    console.log(index + ':' + value); 
});
//outputs: 1:Red 2:Orange 3:Green
$.each($('.productDescription'), function() { 
    console.log($(this).html());
});
//outputs: Red Orange Green

Заключение

Используйте функцию $.each(), потому что она быстрая.

Помните: $.each() и $(selector).each() функции это два разных метода.

Тема: 
LikeMe: