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

Question

我想遍历具有动态名称值的元素列表，比如item1，item2等，但我像下面那样得到了undefined。

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

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

此外，由于条件i <= len（它应该是i < len），只有两个元素，并且for循环被执行了三次。由于这个原因，最后一次迭代的值为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); 
});