同時循環兩個不同的選擇器

Question

我正在使用JQuery來計算一些總計數字，並且遇到了問題。

比方說，我有兩組輸入，每組都有一個唯一的名稱。

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

我通過在同一時間每個組輸入要循環，這樣我可以爲（！isNaN），並檢查兩者（長度！== 0），並且如果該值是有效的，我想將它們相乘並添加到運行總數中。

我知道我可以通過一個選擇器循環使用每個（），但我怎麼能在同一時間循環兩個？有沒有一種優雅的方式來實現這一目標？

Answer 1

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

Answer 2

使用逗號：

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

Answer 3

所有可愛的東西的jQuery不談，這裏是一個通用的 「壓縮」 功能。

a和b應該是數組（或至少是數組）。如果fn提供，這將作爲地圖在每個對的項目。請記住，jQuery對象是數組。

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 
} 

實施例：

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

實施例與fn：

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

實施例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 
    }) 

編碼愉快。

Answer 4

將選擇的結果存儲在變量中，並且在枚舉引用另一個集合中的相關元素時使用each的參數index。

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

迴路，並使用該指數

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

或類似

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

Answer 6

如何：

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

這裏的一個直接的解決方案

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  
}