同一類的元素數組javascript

-4

如何獲取具有相同類的元素值的數組？同一類的元素數組javascript

當我做這個，我只得到了第一個元素，但我想整個數組：

var classes = document.querySelector(".klass").value; 
alert(classes); //Outputs only the first element

而且我想要得到的輸入值的完整陣列：

<input type="text" class="klass" /> 
<input type="text" class="klass" /> 
<input type="text" class="klass" />

這可能嗎？

來源

2014-12-31 Maroxtn

'var elements = document.getElementsByClassName（「klass」）;'？ – BatScream

...或使用'document.querySelectorAll（）'代替。 – Teemu

認真的傢伙爲什麼投票下來querySelector是一種方法來使用JavaScript的CSS選擇器？ – Maroxtn

你需要遍歷你的元素數組，並獲得每個元素的值。

var classes = document.querySelectorAll(".klass").value, 
    values = []; 

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

注意，這可能不會像使用[].map乾淨，但它是一個good deal faster。

來源

2014-12-31 11:32:48 Hydrothermal

爲什麼你將類數組推入另一個類或它只是一個健全的檢查，一切都很好？ – Maroxtn

你可以寫同一個數組（即'classes [i] = classes [i] .value'），但我更願意避免這樣做，因爲潛在的問題/不一致。不過，它會給你基本上相同的結果。 – Hydrothermal

使用document.querySelectorAll檢索NodeList (see also the section "How can I convert NodeList to Array?")然後將其轉換爲數組，並返回一個返回每個元素的值的函數map。

var classesNodeList = document.querySelectorAll(".klass"); 
var classes = Array.prototype.slice.call(classesNodeList).map(function(element) { 
    return element.value; 
});

更新

正如Ginden在註釋中指出，較短的方式做到這一點是使用Function.prototype.call

var classesNodeList = document.querySelectorAll(".klass"); 
var classes = Array.prototype.map.call(classesNodeList, function(element) { 
    return element.value; 
});

來源

2014-12-31 11:34:13 axelduch

你甚至可以使用'[] .map.call（nodeList，func）'。 ;） – Ginden

Yus它更短的ineed :) – axelduch

你可以請簡化該函數如何返回形式數組或每個自變量中的大多數這個類和方法對我來說是新的 – Maroxtn

您可以使用節點列表傳遞給Array.prototype.map首先使用querySelectorAll方法，然後使用數組的map函數N到檢索結果：

var elements = document.querySelectorAll('.klass'); 
var values = [].map.call(elements, function(e) { 
    return e.value; 
});

來源

2014-12-31 11:35:57 udalmik

對於這樣一個簡單的CSS選擇器的表情，我會用getElementsByClassName，並給它的類名，而不是querySelectorAll。 getElementsByClassName通常比使用querySelectorAll大幾個數量級。看到這個jsperf。

var classes = document.getElementsByClassName("klass"); // Do not use a period here! 
var values = Array.prototype.map.call(classes, function(el) { 
    return el.value; 
});

getElementsByClassName通常比querySelectorAll更快。瀏覽器已經按類名索引元素以優化CSS轉換的速度。 getElementsByClassName返回HTMLCollection元素，因此它沒有Array方法，您也需要使用Array.prototype...。

來源

2014-12-31 11:48:47 Louis

同一類的元素數組javascript

回答

相關問題