javascript - elementos - recorrer todos los input de un formulario jquery
¿Cómo recorrer el conjunto en jQuery? (7)
Opción 1: el tradicional for loop
Los basicos
Un bucle tradicional tiene tres componentes:
- la inicialización: se ejecuta antes de que se ejecute el bloque de búsqueda la primera vez
- la condición: comprueba una condición cada vez antes de que se ejecute el bloque de bucle, y sale del bucle si es falso
- la idea de último momento: se realiza cada vez que se ejecuta el bloque de bucle
Estos tres componentes están separados entre sí por a ; símbolo. El contenido para cada uno de estos tres componentes es opcional, lo que significa que el siguiente es el mínimo posible for bucle:
for (;;) {
// Do stuff
}
Por supuesto, deberá incluir un if(condition === true) { break; } if(condition === true) { break; } o un if(condition === true) { return; } if(condition === true) { return; } algún lugar dentro for -loop para que deje de ejecutarse.
Generalmente, sin embargo, la inicialización se usa para declarar un índice, la condición se usa para comparar ese índice con un valor mínimo o máximo, y la idea de último momento se usa para incrementar el índice:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
Usando un tradtional for -loop para recorrer un array
La forma tradicional de recorrer una matriz es esta:
for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}
O bien, si prefiere hacer un ciclo hacia atrás, haga esto:
for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}
Sin embargo, hay muchas variaciones posibles, como por ej. éste :
for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}
... o este ...
var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}
... o este :
var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}
Lo que mejor funcione es principalmente una cuestión de gusto personal y el caso de uso específico que está implementando.
Nota :¡Cada una de estas variaciones es compatible con todos los navegadores, incluidos los antiguos!
Opción 2: The while -loop
Una alternativa a for -loop es un while -loop. Para recorrer una matriz, puede hacer esto:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
Nota :
Al igual que los tradicionales bucles, while bucles son compatibles incluso con el más antiguo de los navegadores.
Además, cada bucle while se puede reescribir como un bucle. Por ejemplo, while -loop hereabove se comporta de la misma manera que este for -loop:
for(var key = 0;value = myArray[key++];){
console.log(value);
}
Opción 3: for...in y for...of
En JavaScript, también puedes hacer esto:
for (i in myArray) {
console.log(myArray[i]);
}
Sin embargo, esto debe usarse con cuidado, ya que no se comporta de la misma manera que un traditonal for -loop en todos los casos, y existen posibles efectos secundarios que deben considerarse. Consulte ¿Por qué usar "para ... en" con iteración de matriz es una mala idea? para más detalles.
Como alternativa for...in , ahora también hay for...of . El siguiente ejemplo muestra la diferencia entre a for...of loop y a for...in loop:
var myArray = [3, 5, 7];
myArray.foo = "hello";
for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}
for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
Nota :
También debe tener en cuenta que ninguna versión de Internet Explorer admite for...of ( Edge 12+ lo hace) y que for...in requiere al menos IE10.
Opción 4: Array.prototype.forEach()
Una alternativa a For -loops es Array.prototype.forEach() , que utiliza la siguiente sintaxis:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
Nota :
Array.prototype.forEach() es compatible con todos los navegadores modernos, así como con IE9 +.
Opción 5: jQuery.each()
Además de las otras cuatro opciones mencionadas, jQuery también tenía su propia variación foreach .
Utiliza la siguiente sintaxis:
$.each(myArray, function(key, value) {
console.log(value);
});
Estoy tratando de recorrer una matriz. Tengo el siguiente código:
var substr = currnt_image_list.split('',''); //This will split up 21,32,234,223,
Estoy tratando de sacar todos los datos de la matriz. ¿Puede alguien guiarme en el camino correcto, por favor?
jQuery.each ()
jQuery.each(array, callback)
iteración de matriz
jQuery.each(array, function(Integer index, Object value){});
iteración de objetos
jQuery.each(object, function(string propertyName, object propertyValue){});
example:
var substr = [1, 2, 3, 4];
$.each(substr , function(index, val) {
console.log(index, val)
});
var myObj = { firstName: "skyfoot"};
$.each(myObj, function(propName, propVal) {
console.log(propName, propVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
javascript javascript para array
en bucle
for (initialExpression; condition; incrementExpression)
statement
ejemplo
var substr = [1, 2, 3, 4];
//loop from 0 index to max index
for(var i = 0; i < substr.length; i++) {
console.log("loop", substr[i])
}
//reverse loop
for(var i = substr.length-1; i >= 0; i--) {
console.log("reverse", substr[i])
}
//step loop
for(var i = 0; i < substr.length; i+=2) {
console.log("step", substr[i])
}
para en
//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
console.log(substr[i])
}
para de
for(var i of subs) {
//can use break;
console.log(i);
}
para cada
substr.forEach(function(v, i, a){
//cannot use break;
console.log(v, i, a);
})
Recursos
(Actualización: mi otra respuesta aquí presenta las opciones que no son jQuery mucho más a fondo. Sin jQuery.each , la tercera opción a continuación, jQuery.each , no figura en ella).
Tres opciones:
Bucle genérico:
var i;
for (i = 0; i < substr.length; ++i) {
// do something with `substr[i]`
}
Ventajas : Directo, sin dependencia de jQuery, fácil de entender, sin problemas para preservar el significado de this en el cuerpo del bucle, sin sobrecarga innecesaria de llamadas a funciones (por ejemplo, en teoría más rápido, aunque de hecho tendrías tener tantos elementos que las probabilidades son de que tengas otros problemas; details ).
ES5 para forEach :
A partir de ECMAScript5, las matrices tienen una función forEach en ellas que hace que sea fácil recorrer la matriz:
substr.forEach(function(item) {
// do something with `item`
});
(Nota: hay muchas otras funciones, no solo para forEach , vea la respuesta a la que se hace referencia arriba para más detalles).
Ventajas : Declarativo, puede usar una función precompilada para el iterador si tiene una útil, si el cuerpo de su ciclo es complejo, el alcance de una llamada a la función a veces es útil, sin necesidad de una variable i en su ámbito de contenido.
Desventajas : no todos los navegadores lo tienen todavía, aunque la mayoría lo hace, y siempre puedes usar un calce ES5 (una búsqueda mostrará una lista de varios) para proporcionarlo en los navegadores que aún no lo tienen. Si está usando this en el código que lo contiene, debe pegarlo en una variable para que pueda usarlo dentro de la función o pasarlo como un segundo argumento a forEach , ya que dentro de la función de iteración, this será undefined (en estricto modo) o el objeto global ( window ) en modo no estricto a menos que le dé a forEach uno un valor específico para él.
jQuery.each:
jQuery.each(substr, function(index, item) {
// do something with `item` (or `this` is also `item` if you like)
});
Ventajas : todas las mismas ventajas que para forEach , además de que sabes que están ahí ya que estás usando jQuery.
Desventajas : si estás usando this en el código que lo contiene, debes pegarlo en una variable para que puedas usarlo dentro de la función, ya que this significa algo más dentro de la función.
Sin embargo, puedes evitar this usando cualquiera $.proxy : $.proxy :
jQuery.each(substr, $.proxy(function(index, item) {
// do something with `item` (`this` is the same as it was outside)
}, this));
... o Function#bind :
jQuery.each(substr, function(index, item) {
// do something with `item` (`this` is the same as it was outside)
}.bind(this));
... o en ES2015 ("ES6"), una función de flecha:
jQuery.each(substr, (index, item) => {
// do something with `item` (`this` is the same as it was outside)
});
Qué NO hacer:
No use for..in para esto (o si lo hace, hágalo con las protecciones adecuadas). Verás gente diciendo (de hecho, brevemente hubo una respuesta aquí que dice eso), pero por for..in no hace lo que mucha gente piensa que hace (¡hace algo aún más útil!). Específicamente, for..in recorre los nombres de las propiedades enumerables de un objeto (no los índices de una matriz). Como las matrices son objetos, y sus únicas propiedades enumerables por defecto son los índices, en su mayoría parece funcionar en una implementación suave. Pero no es una suposición segura que solo puedas usarlo para eso. Aquí hay una exploración: http://jsbin.com/exohi/3
Debería suavizar el "no hacer" de arriba. Si se trata de matrices dispersas (por ejemplo, la matriz tiene 15 elementos en total, pero sus índices están distribuidos en el rango de 0 a 150,000 por alguna razón, por lo que la length es 150,001), y si usa las salvaguardas apropiadas como hasOwnProperty y verificar el nombre de la propiedad es realmente numérico (ver el enlace de arriba), for..in puede ser una manera perfectamente razonable de evitar muchos bucles innecesarios, ya que solo se enumerarán los índices poblados.
No hay necesidad de jquery aquí solo funciona un bucle for :
var substr = currnt_image_list.split('','');
for(var i=0; i< substr.length; i++) {
alert(substr[i]);
}
Puede usar un ciclo for :
var things = currnt_image_list.split('','');
for(var i = 0; i < things.length; i++) {
//Do things with things[i]
}
Use Jquery cada uno. Hay otras formas, pero cada una está diseñada para este propósito.
$.each(substr, function(index, value) {
alert(value);
});
Y no coloque la coma después del último número.
Use la función each() de jQuery.
Aquí hay un ejemplo:
$.each(currnt_image_list.split('',''), function(index, value) {
alert(index + '': '' + value);
});