jQuery .each() - ¿Usos prácticos?

Question

Estoy trabajando para intentar comprender mejor el método jQuery.each(). He aquí un ejemplo que se me ocurrió, no es muy práctico, pero realiza una acción en cada elemento seleccionado del conjunto seleccionado de elementos devueltos:

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

¿Cuáles son algunos ejemplos de usos prácticos del método each estás usando en tu código? ¿Qué representa exactamente $ (this)?

Answer 1

en cuenta que hay dos tipos de jQuery de cada, el que repite una y devuelve objetos jQuery, la otra es una versión más genérica.

Core/cada
Ejemplo: crear un archivo CSV de todos los hrefs en la página. (itera sobre los elementos DOM a juego y 'esto' reffers al elemento actual)

var hrefs = ""; 

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

alert(hrefs); 

Utilidades/jQuery.each
iterar sobre una matriz o los elementos de un objeto: (a través de: 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

Un uso simple, pero es muy útil para iterar sobre una mesa y la creación de bandas filas alternas:

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

Utiliza cada función para acceder/modificar cualquier propiedad dom que no esté envuelta por jquery.

A menudo tengo una cuadrícula/tabla con una columna que contiene casillas de verificación.

Escribo un selector para obtener la lista de casillas de verificación, luego establezco la propiedad marcada en verdadero/falso. (para marcar todo, desmarque todo).

Tiene que usar cada función para eso.

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

Answer 4

veces lo uso para atravesar un gran número de sub-elementos en un conjunto de resultados de datos 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() 
     }); 

que funciona bastante bien.

Answer 5

Uso el método .each() para ASP.NET WebMethod llamadas que devuelven cadenas JSON. En este ejemplo, se rellena un cuadro de lista con los valores devueltos de la llamada 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 ha incorporado un serializador JSON que convierte automagicamente una clase en la cadena JSON que aparece en la parte inferior de esta enviar.Aquí es una clase de ejemplo que puede ser devuelto por el WebMethod:

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

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

Y el WebMethod sí:

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

Cuando se especifica dataType: "json" en las opciones de jQuery Ajax, la cadena se convierte automáticamente en un Javascript objeto, por lo que simplemente puede escribir this.Text o this.Value para obtener los datos.

Aquí es el JSON resultante volvió de la WebMethod arriba:

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

Nota: la data.d parámetro (y del mismo modo el primer valor visto en la cadena JSON) se explica here.

Answer 6

Como he tenido el mismo problema ... les dejo este enlace que era muy útil para mí: Examples

Answer 7

each() es una función de repetidor se utiliza para recorrer el objeto, las matrices y los objetos de matriz similar . Los objetos simples se iteran a través de sus propiedades nombradas mientras que las matrices y los objetos similares a una matriz se iteran a través de sus índices.

Por ejemplo: método

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

Objeto Llanura

matriz de iteración usando each() Iteration usando .Cada método

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

Answer 8

$.each() uso como para el bucle, y $(this) refieren el objeto actual del lo op. Aquí, en el ejemplo siguiente, donde recorremos la fila de la tabla $(this), representa la fila actual que itera.

También puedes ver: 5 ways use of jQuery $.each()

Loop a través de una matriz

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

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

---

Loop a través de fila de tabla (elemento 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); 
});