Question

我正在使用JQuery来计算一些总数，我遇到了一个问题。

假设我有两组输入，每组都有一个唯一的名称。

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

我想同时循环遍历每组输入，以便我可以同时检查（！isNaN）和（length！== 0），如果值有效，我想将它们相乘，添加到运行总计。

我知道我可以使用each（）遍历一个选择器，但是如何同时循环两个？是否有一种优雅的方式来实现这一目标？

Answer 1

除了jQuery所有可爱的东西，这里是一个通用的“zip”功能。

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 2

这是一个直接的解决方案

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    
}

Answer 3

将选择的结果存储在变量中，并在枚举时使用index each参数来引用另一组中的相关元素。

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 4

这个怎么样：

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 5

使用逗号：

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

Answer 6

循环并使用索引

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 7

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

通过两个不同的选择器同时循环

7 个答案: