for - jQuery.each()-¿Usos prácticos?
jquery each class (9)
Estoy trabajando para tratar de entender mejor el método jQuery.each() . Este es un ejemplo que se me ocurrió, no 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 que está utilizando en su código? ¿Qué representa exactamente $ (esto)?
A veces lo uso para atravesar una gran cantidad de subelementos 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()
});
Eso funciona bastante bien.
Aquí hay enlaces tutoriales:
$(function(){
var ArrList=["Jaipur","Udaipur","Kota","Ahmedabad","Surat"];
$(ArrList).each(function(index,item){
$("ul").append("<li>"+item+"</li>");
});
});
Como tuve el mismo problema ... Estoy publicando este enlace, que fue muy útil para mí: Examples
Tenga en cuenta que hay dos tipos de jQuery, cada uno itera y devuelve objetos jQuery, el otro es una versión más genérica.
Núcleo / cada
Ejemplo: Cree un csv de todos los hrefs en la página. (itera sobre elementos DOM coincidentes y ''esto'' se refiere 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
Iterando sobre una matriz o los elementos de un objeto: (a través de: Documentación 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 );
});
Un uso simple, pero es muy útil para iterar sobre una tabla y trazar filas alternativas:
// 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");
}
});
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 configuro la propiedad marcada en verdadero / falso. (para marcar todo, desmarcar todo).
Tienes que usar cada función para eso.
$ (". mycheckbox"). each (function () {this.checked = true;});
Utilizo el método .each() para las llamadas a WebMethod ASP.NET que devuelven cadenas JSON. En este ejemplo, 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 tiene un serializador JSON incorporado que convierte automáticamente una clase en la cadena JSON que se ve al final de esta publicación. Aquí hay un ejemplo de clase que puede ser devuelto por WebMethod :
public class Tuple
{
public string Text;
public int Value;
public Tuple(string text, int val)
{
Text = text;
Value = val;
}
}
Y el propio 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;
}
Cuando especifica dataType: "json" en las opciones de jQuery Ajax, la cadena se convierte automáticamente en un objeto de Javascript, por lo que simplemente puede escribir this.Text o this.Value para obtener los datos.
Aquí está el JSON resultante devuelto desde el WebMethod anterior:
{"d":[{"Value":1,"Text":"First option"},{"Value":2,"Text":"Second option"}]}
Nota: el parámetro data.d (y también el primer valor visto en la cadena JSON) se explica here .
$.each() usa como para loop, y $(this) refieren al objeto actual del loop. Aquí en el siguiente ejemplo, donde hacemos un bucle sobre la fila de la tabla $(this) representa la fila actual que itera.
También puedes ver: 5 formas de uso de jQuery $ .each ()
Recorrer una matriz
// here''s the array variable
var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {
console.log(index+'' : ''+value);
});
Bucle a través de la fila de la 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);
});
each() es una función de iterador utilizada para hacer un bucle sobre objetos, matrices y objetos similares a matrices. Los objetos simples se iteran a través de sus propiedades con nombre, mientras que las matrices y los objetos similares a matrices se iteran a través de sus índices.
Por ejemplo:
Iteración de matrices utilizando el método .each ()
$.each( arr, function( index, value ){
//code here
});
Iteración de objetos simples usando el método .each
$.each( { firstName: "Amit", lastName: "Gupta" }, function(firstName, lastName){
console.log( " First Name: " + firstName + " Last Name: " + lastName);
});