Looping a través de dos selectores diferentes al mismo tiempo

Question

Estoy usando JQuery para calcular algunas cifras de totales y me he encontrado con un problema.

Digamos que tengo dos conjuntos de entradas, cada una con un nombre único.

$('[name="quantity\\[\\]"]') 
$('[name="price\\[\\]"]') 

Quiero desplazarse por cada conjunto de entradas al mismo tiempo, de modo que pueda comprobar tanto para (! IsNaN) y (longitud! == 0), y si los valores son válidos, quiero multiplícalos juntos y agrega a un total acumulado.

Sé que puedo recorrer un selector utilizando cada uno(), pero ¿cómo puedo pasar por dos al mismo tiempo? ¿hay una forma elegante de lograr este objetivo?

Answer 1

var prices = $('[name="price\\[\\]"]'); 
$('[name="quantity\\[\\]"]').each(function(i){ 
    var quantity = this; 
    var price = prices[i]; 
    // Compare them here. 
}); 

Answer 2

Utilice una coma:

$('[name="quantity\\[\\]"], [name="price\\[\\]"]') 

Answer 3

todas las cosas lindas de jQuery a un lado, aquí es una función genérica "zip".

a y b deberían ser matrices (o al menos tipo array). Si se suministra fn, esto actuará como un mapa sobre cada par de elementos. Recuerde que los objetos jQuery son matrices.

function zip (a, b, fn) { 
    var len = Math.max(a.length, b.length) 
    var result = [] 
    if (fn) { 
    for (var i = 0; i < len; i++) { 
     result.push(fn(a[i], b[i])) 
    } 
    } else { 
    for (var i = 0; i < len; i++) { 
     result.push([a[i], b[i]]) 
    } 
    } 
    return result 
} 

Ejemplo:

var z = zip([1,2,3], ['a','b']) 
// z = [[1,'a'],[2,'b'],[3,undefined] 
for (var i = 0; i < z.length; i++) { 
    var elm = z[i] 
    var a = elm[0] 
    var b = elm[1] 
    alert(a + "-" + b) 
} 

Ejemplo con fn:

zip([1,2,3], ['a','b'], function (a, b) { 
    alert(a + "-" + b) 
}) 

Ejemplo en contexto jQuery'ish:

var total = 0 
zip(
    $('[name="quantity\\[\\]"]'), 
    $('[name="price\\[\\]"]'), 
    function (a, b) { 
    // if either a or b are undefined, there is already a problem 
    // the `expr || 0` is to silently handle cases of `NaN || 0` which may 
    // result if the price or quantity are garbage values 
    var qty = parseInt($(a).val(), 10) || 0 
    var price = parseInt($(b).val(), 10) || 0 
    total += qty * price 
    }) 

codificación feliz.

Answer 4

Almacenar el resultado de la selección en una variable, y usar el argumento index para el each al enumerar para hacer referencia al elemento relacionado en el otro conjunto.

var quan = $('[name="quantity\\[\\]"]'); 
var price = $('[name="price\\[\\]"]'); 
var total = 0; 

quan.each(function(index) { 
    var quan_val = +$(this).val(); 
    var price_val = +price.eq(index).val(); 

    if(quan_val && price_val) { 
     total += (quan_val * price_val); 
    } 
}); 

alert(total); 

Answer 5

bucle y utilizar el índice

var quantity = $('[name="quantity\\[\\]"]') 
$('[name="price\\[\\]"]').each(function(ind){ 
    var currentPrice = $(this); 
    var currentQuantity = quantity.eq(ind); 
}); 

o algo así

$('[name="price\\[\\]"]').each(function(ind){ 
    var currentPrice = $(this); 
    var currentQuantity = currentPrice.closest('[name="quantity\\[\\]"]'); 
}); 

Answer 6

¿Qué tal esto:

function getValue() { return this.value; } 

var valsA = $('input[name="quantity\\[\\]"]').map(getValue).get(), 
    valsB = $('input[name="price\\[\\]"]').map(getValue).get(); 

for (var i = 0; i < valsA.length; i++) { 
    // work with valsA[i] and valsB[i] here 
} 

Answer 7

Aquí está una solución directa

var quantities = $('[name="quantity\\[\\]"]'), 
    prices = $('[name="price\\[\\]"]'); 


var len = Math.max(quantities.size(), prices.size()); 
for (var i=0; i < len; i++) { 
    var quantity = quantities.get(i); 
    var price = prices.get(i); 
    // Do whatever you want with quantity and price  
}