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

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