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

Question

Я работаю над тем, чтобы лучше понять метод 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, который вы используете в своем коде? Что именно представляет $ (this)?

Answer 1

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

Ядро / каждый
Пример: создайте CSV из всех ссылок на странице. (перебирает совпадающие элементы 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 );
});

Answer 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()
      });

Это прекрасно работает.

Answer 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) объясняется здесь .

Answer 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");
    }
});

Answer 5

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

Answer 6

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

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

Цикл по массиву

// here's 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);
 });

Answer 7

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);
});

Answer 8

Вот учебные ссылки:

$(function(){
            var ArrList=["Jaipur","Udaipur","Kota","Ahmedabad","Surat"];
                $(ArrList).each(function(index,item){
                    $("ul").append("<li>"+item+"</li>");
                });
        });

https://www.youtube.com/watch?v=qiYdTv_sZyU

Answer 9

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

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

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

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

$ (". Mycheckbox"). Each (function () {this.checked = true;});