Question

我想循环遍历具有动态名称值的元素列表，如item1，item2等，但我得到了如下所示的未定义。

＆＃13;

len = $('.aws').length + 1;

var obj = [],
  temp = {};

for (var i = 1; i <= len; i++) {
  console.log(i)
  temp["index"] = $('.aws[name="item' + i + '"]').val()
  obj.push(temp);
}

console.log(obj);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="aws" name="item1" value="1.jpg">
<input type="hidden" class="aws" name="item2" value="2.jpg">

＆＃13;

Answer 1

问题是你在每次迭代时都推送对同一对象的引用。这样，index对象上的temp属性将是上次迭代的值。

此外，只有两个元素，for循环由于条件i <= len（应该是i < len）而执行了三次。因此，最后一次迭代的值为undefined，因为该元素不存在。这导致index属性上的所有temp属性都设置为undefined。

如果您想要原生JS解决方案，您只需使用以下代码：

var elements = document.querySelectorAll('.aws');
var values = [];

for (var i = 0; i < elements.length; i++) {
  values.push({index: elements[i].value});
}

在上面的代码片段中，每次迭代时都会将一个新对象推送到values数组（而不是对同一对象的引用）。 for循环条件也是i < elements.length（而非i <= elements.length），因此它只会迭代2次（而不是像示例中的3次）。

如果您想要更短的jQuery解决方案，只需使用.map()方法：

var values = $('.aws').map(function () {
  return {index: this.value };
}).get();

Answer 2

试试这个：host file

var obj = [],
  temp = {};

$(document).ready(function() {
  $(".aws").each(function(i, v) {
    obj.push({ "index": $(this).val() });
  });
  console.log(obj);
});

以这种方式循环更容易。阅读更多：https://jsfiddle.net/Twisty/ys889cn6/1/

有些原生

$(document).ready(function() {
  var obj = [],
    temp = {},
  len = $('.aws').length;
  for (var i = 0; i < len; i++) {
  console.log("Get Value from: .aws[name='item" + (i+1) + "']");
    temp["index"] = $(".aws[name='item" + (i+1) + "']").val();
    obj.push(temp);
  }
  console.log(obj);
});

正如@PatrickEvans所说，我们只是放弃了同一个对象。结果：

Get Value from: .aws[name='item1']
Get Value from: .aws[name='item2']
[Object { index="2.jpg"}, Object { index="2.jpg"}]

使用以下方法修正：

$(document).ready(function() {
  var obj = [],
    temp = {},
  len = $('.aws').length;
  for (var i = 0; i < len; i++) {
  console.log("Get Value from: .aws[name='item" + (i+1) + "']");
    obj.push({"index": $(".aws[name='item" + (i+1) + "']").val()});
  }
  console.log(obj);
});

通过循环名称选择器获取输入值

2 个答案: