JQuery.each() - Практическое использование?

Я работаю над тем, чтобы лучше понять метод jQuery.each(). Вот пример, который я придумал, не очень практичный, но он выполняет действие для каждого выбранного элемента из выбранного набора возвращаемых элементов:

// Loop over each link.
$( "#links a.number" ).each(

// For each number, run this code. The "intIndex" is the 
// loop iteration index on the current element.
function( intIndex ){

// Bind the onclick event to simply alert the iteration index value.
    $( this ).bind ("click", function(){
        alert( "Numbered index: " + intIndex );
    });
});

Каковы некоторые примеры практического использования метода .each, который вы используете в своем коде? Что именно представляет собой $(это)?

Ответ 1

Обратите внимание, что каждый из них имеет два типа jQuery: один выполняет итерацию и возвращает объекты jQuery, другой - более общую версию.

Ядро/каждый
Пример. Создайте csv всех hrefs на странице. (итерации над соответствующими элементами DOM и 'this' ссылаются на текущий элемент)

 var hrefs = "";

 $("a").each(function() { 
     var href = $(this).attr('href');
     if (href != undefined && href != "") {
         hrefs = hrefs + (hrefs.length > 0 ? "," + href : href);
     }
 });

 alert(hrefs);

Утилиты /jQuery.each
Итерация по массиву или элементам объекта: (через: jQuery Документация)

$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

Ответ 2

Я иногда использую его для перемещения большого количества подэлементов в наборе данных XML-данных

   my parsedData = [];  
   $('result', data).each(function() {
      parsedData.push(  
         { name: $('name', this).text(),
           addr: $('addr', this).text(),
           city: $('city', this).text(),
           state: $('state', this).text(),
           zip: $('zip', this).text()
      });

Это работает очень хорошо.

Ответ 3

Я использую метод .each() для вызовов ASP.NET WebMethod, возвращающих строки JSON. В этом примере он заполняет список со значениями, возвращаемыми из вызова Ajax:

async: true,
type: "POST",
url: "Example.aspx/GetValues",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
  var list = $('<select />');

  $.each(data.d, function(){
       var val = this.Value;
       var text = this.Text;
       list.append($('<option />').val(val).text(text));
  });

  $('#listbox').empty().append(list.find('option'));
},

ASP.NET имеет встроенный сериализатор JSON, который автоматически преобразует класс в строку JSON, которую вы видите внизу этого сообщения. Вот примерный класс, который может быть возвращен WebMethod:

public class Tuple
{
    public string Text;
    public int Value;

    public Tuple(string text, int val)
    {
        Text = text;
        Value = val;
    }
}

И сам WebMethod:

[WebMethod]
public static List<Tuple> GetValues()
{
    List<Tuple> options = new List<Tuple>();
    options.Add(new Tuple("First option", 1));
    options.Add(new Tuple("Second option", 2));
    return options;
}

Когда вы указываете dataType: "json" в параметрах jQuery Ajax, строка автоматически преобразуется в объект Javascript, поэтому вы можете просто ввести this.Text или this.Value, чтобы получить данные.

Вот результат JSON, возвращенный из WebMethod выше:

{"d":[{"Value":1,"Text":"First option"},{"Value":2,"Text":"Second option"}]}

Примечание: параметр data.d (а также первое значение, видимое в строке JSON) объясняется здесь.

Ответ 4

Простое использование, но оно очень удобно для итерации по таблице и чередования чередующихся строк:

// Adds CSS styling to alternate rows of tables marked with a .data class attribute.
$("table.data").each(function() {
    if (!$(this).hasClass("noStriping")) {
        $(this).find("tbody tr:nth-child(odd)").addClass("odd");
        $(this).find("tbody tr:nth-child(even)").addClass("even");
    }
});

Ответ 5

У меня была такая же проблема... Я отправляю эту ссылку, которая мне очень полезна: Examples

Ответ 6

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

Например:

Итерация массива с использованием метода .each()

$.each( arr, function( index, value ){
  //code here
});

Итерация простого объекта с использованием .each метода

$.each( { firstName: "Amit", lastName: "Gupta" }, function(firstName, lastName){
    console.log( " First Name: " + firstName + " Last Name: " + lastName);
});

Ответ 7

Вы используете каждую функцию для доступа/изменения любого свойства dom, которое не завершено jquery.

У меня часто есть таблица/таблица с столбцом, содержащим флажки.

Я пишу селектор, чтобы получить список флажков, а затем установите для свойства checked значение true/false. (для проверки всех, снимите отметку со всех).

Вы должны использовать каждую функцию для этого.

$( ". mycheckbox" ). each (function() {this.checked = true;});

Ответ 8

$.each() используйте как для цикла, а $(this) ссылаются на текущий объект цикла. Здесь, в приведенном ниже примере, где мы перебираем строку таблицы $(this), представляет текущую строку, которую она итерации.

Также проверьте: 5 способов использования jQuery $.each()

Петля через массив

// here the array variable
 var myArray = ["apple", "mango", "orange", "grapes", "banana"];

 $.each(myArray, function (index, value) {
      console.log(index+' : '+value);
 });

Петля через таблицу строк (элемент HTML)

 $("#myTable tr").each(function () {
        var self = $(this);
        var col_1_value = self.find("td:eq(0)").text().trim();
        var col_2_value = self.find("td:eq(1)").text().trim();
        var col_3_value = self.find("td:eq(2)").text().trim();
        var col_4_value = self.find("td:eq(3)").text().trim();
        var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
        console.log(result);
 });