jQuery .each() - Zastosowania praktyczne?

Question

Pracuję nad próbą lepszego zrozumienia metody jQuery.each(). Oto przykład wymyśliłem, nie bardzo praktyczne, ale wykonuje czynność na każdej wybranej pozycji od wybranego zestawu elementów wracający

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

Jakie są niektóre przykłady praktycznych zastosowań metody .each jesteś używając w swoim kodzie? Co dokładnie oznacza $ (this)?

Answer 1

Uwaga istnieją dwa rodzaje jQuery każdy, jeden iteracje nad i zwraca obiekty jQuery, inne to bardziej ogólna wersja.

Rdzeń/każdy
Przykład: Tworzenie csv wszystkich HREF na stronie. (iteruje elementów DOM dopasowania i „ten” reffers do bieżącego elementu)

var hrefs = ""; 

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

alert(hrefs); 

energii/jQuery.each
iteracji na tablicy lub elementy przechowywania: (przez: 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

Prosty w użyciu, ale jest to bardzo przydatne dla iteracji nad stołem i striping alternatywne rzędy:

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

Każda funkcja służy do uzyskiwania dostępu/modyfikowania dowolnej właściwości domeny, która nie jest opakowana przez jquery.

Często mam siatkę/tabelę z kolumną zawierającą pola wyboru.

Piszę selektor, aby uzyskać listę pól wyboru, a następnie ustawić sprawdzoną właściwość na true/false. (dla zaznacz wszystko, odznacz wszystkie).

Musisz użyć do tego każdej funkcji.

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

Answer 4

Czasami używam go na przejeżdżające dużą liczbę podelementy w wynikowego danych 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() 
     }); 

który działa całkiem przyjemnie.

Answer 5

Używam metody .each() dla wywołań ASP.NET WebMethod, które zwracają ciągi JSON. W tym przykładzie, że zapełnia listbox z wartości zwracanych z wywołania 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 ma wbudowany JSON serializatora że automagicznie przekształca klasę w ciąg JSON widać w dolnej części tego stanowisko.Oto klasa przykład, który może być zwrócony przez WebMethod:

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

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

A sama 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; 
} 

Po określeniu dataType: "json" w opcjach jQuery Ajax, łańcuch jest automatycznie przekształcona w JavaScript obiekt, możesz po prostu wpisać this.Text lub this.Value, aby uzyskać dane.

Oto otrzymany JSON zwrócony z powyższego WebMethod:

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

Uwaga:data.d parametrów (i podobnie pierwsza wartość widać na sznurkiem JSON) wyjaśniono here.

Answer 6

Jak miałem ten sam problem ... jestem delegowania ten link co było bardzo użyteczne dla mnie: Examples

Answer 7

each() jest iterator używany do pętli nad obiektem, tablic i obiektów array-like . Proste obiekty są iterowane przez ich nazwane właściwości, podczas gdy tablice i obiekty tablicopodobne są iterowane za pośrednictwem ich indeksów.

Na przykład:

tablicy iteracji pomocą .each() w

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

zwykły Przedmiot iteracji pomocą .each sposób

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

Answer 8

$.each() zastosowanie, jak w pętli i $(this) odnoszą się do bieżącego obiektu lo op. W poniższym przykładzie pętla nad wierszem tabeli $(this) reprezentuje bieżący wiersz, który jest iterowany.

również sprawdzić: 5 ways use of jQuery $.each()

Przelotowe tablicy

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

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

---

pętli przez wiersz tabeli (element 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); 
});