jQuery .each() - Sử dụng thực tế?

Question

Tôi đang cố gắng hiểu rõ hơn phương pháp jQuery.each(). Dưới đây là một ví dụ tôi đã đưa ra, không phải là rất thực tế, nhưng nó thực hiện một hành động trên mỗi sản phẩm được chọn từ phần thiết lập lựa chọn các yếu tố trở lại:

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

số ví dụ về sử dụng thực tế của phương pháp .each bạn là gì sử dụng trong mã của bạn? Chính xác thì $ (cái này) đại diện cho cái gì?

Answer 1

Lưu ý có hai loại jQuery mỗi, là lặp trên và trả về đối tượng jQuery, các khác là một phiên bản chung chung hơn.

Core/mỗi
Ví dụ: Tạo một csv của tất cả các href trên trang. (Lặp trên phần tử DOM phù hợp và 'này' reffers tới phần tử hiện tại)

var hrefs = ""; 

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

alert(hrefs); 

Utilities/jQuery.each
iterating trên một mảng hoặc các yếu tố của một đối tượng: (thông qua: 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

Một sử dụng đơn giản, nhưng nó rất tiện dụng cho iterating trên một bảng và kẻ vạch hàng thay thế:

// 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 3

Bạn sử dụng từng chức năng để truy cập/sửa đổi bất kỳ thuộc tính dom nào không được bao bọc bởi jquery.

Tôi thường có lưới/bảng có cột chứa hộp kiểm.

Tôi viết bộ chọn để có danh sách hộp kiểm, sau đó đặt thuộc tính đã chọn thành true/false. (để kiểm tra tất cả, bỏ chọn tất cả).

Bạn phải sử dụng từng chức năng cho điều đó.

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

Answer 4

đôi khi tôi sử dụng nó để vượt qua một số lượng lớn các phần tử con trong một resultset dữ liệu 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() 
     }); 

đó làm việc khá độc đáo.

Answer 5

Tôi sử dụng phương thức .each() cho các cuộc gọi ASP.NET WebMethod trả về chuỗi JSON. Trong ví dụ này, nó populates một ListBox với các giá trị trở về từ cuộc gọi 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 có một built-in JSON serializer rằng Automagically chuyển đổi một lớp thành chuỗi JSON bạn nhìn thấy ở dưới cùng của này bài đăng.Dưới đây là một lớp ví dụ có thể được trả lại bởi WebMethod:

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

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

Và WebMethod bản thân:

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

Khi bạn xác định dataType: "json" trong các tùy chọn jQuery Ajax, chuỗi được tự động chuyển đổi thành một Javascript đối tượng, vì vậy bạn có thể chỉ cần nhập this.Text hoặc this.Value để nhận dữ liệu.

Dưới đây là kết quả JSON trở về từ các WebMethod trên:

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

Lưu ý: các data.d tham số (và tương tự như vậy giá trị đầu tiên nhìn thấy trong chuỗi JSON) được giải thích here.

Answer 6

Như tôi đã cùng một vấn đề ... Tôi gửi bài liên kết này mà rất hữu ích cho tôi: Examples

Answer 7

each() là một chức năng lặp sử dụng để lặp qua đối tượng, mảng, và các đối tượng mảng giống như . Các đối tượng đồng bằng được lặp qua các thuộc tính được đặt tên của chúng trong khi các mảng và các đối tượng giống mảng được lặp qua các chỉ mục của chúng.

Ví dụ:

Mảng lặp lại sử dụng .each() phương pháp

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

Plain Object Iteration sử dụng phương pháp .each

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

Answer 8

$.each() sử dụng như vòng lặp for, và $(this) tham chiếu đối tượng hiện tại của lo op. Ở đây trong ví dụ dưới đây, nơi chúng tôi lặp qua hàng của bảng $(this) đại diện cho hàng hiện tại nó lặp lại.

Ngoài ra kiểm tra: 5 ways use of jQuery $.each()

Vòng qua một mảng

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

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

---

Vòng qua Bảng Row (HTML tố)

$("#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); 
});