通過循環名稱選擇器獲取輸入值

Question

我想遍歷具有動態名稱值的元素列表，例如item1，item2等，但是我得到如下未定義的信息。

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

 <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"> 

Answer 1

問題是，你推到在每次迭代同一對象的引用。 在此過程中，該index的物業temp對象將是最后一次迭代的值。

此外，只有兩個元件，並且for循環被因條件而執行三次i <= len （它應該是i < len ）。 由於這個原因，該值undefined的最后一次迭代，因為該元素不存在。 這導致temp屬性上的所有index屬性都設置為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

試試這個： https : //jsfiddle.net/Twisty/ys889cn6/1/

var obj = [],
  temp = {};

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

以這種方式循環要容易得多。 了解更多： https ： //api.jquery.com/each/

有點本地

$(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);
});