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对象，另一个是更通用的版本。

<强>核心/每
示例：在页面上创建所有href的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 Documentation）

$.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

我对返回JSON字符串的ASP.NET .each()调用使用WebMethod方法。在此示例中，它使用从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;
}

在jQuery Ajax选项中指定dataType: "json"时，字符串会自动转换为Javascript对象，因此您只需键入this.Text或this.Value即可获取数据。

以下是从上面WebMethod返回的结果JSON：

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

注意： data.d参数（以及在JSON字符串中看到的第一个值）解释为here。

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

因为我遇到了同样的问题...我发布的链接对我来说非常有用： Examples

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

Answer 7

$.each()用于循环，$(this)引用循环的当前对象。在下面的示例中，我们循环表行$(this)表示它迭代的当前行。

同时检查：5 ways use of 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 8

您可以使用每个函数来访问/修改未被jquery包装的任何dom属性。

我经常有一个网格/表格，其中包含一个包含复选框的列。

我编写了一个选择器来获取复选框列表，然后将checked属性设置为true / false。（查看全部，取消选中全部）。

你必须使用每个功能。

$（“。mycheckbox”）。each（function（）{this.checked = true;}）;

Answer 9

以下是教程链接：

$(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

jQuery .each（） - 实际用途？

9 个答案: