jQuery getElementsByClassName() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19210665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getElementsByClassName() is not working
提问by Mercury121
The follwing code is to sort form list options alphabetically but the 'getElementsByClassName()' is not working and I cant figure out why.
以下代码是按字母顺序对表单列表选项进行排序，但“getElementsByClassName()”不起作用，我不知道为什么。
I am using the latest jQuery.
我正在使用最新的 jQuery。
window.onload=function(){
function sortlist() {
var cl = document.getElementsByClassName('car_options');
var clTexts = new Array();
for(i = 1; i < cl.length; i++) {
clTexts[i-1] =
cl.options[i].text.toUpperCase() + "," +
cl.options[i].text + "," +
cl.options[i].value;
}
clTexts.sort();
for(i = 1; i < cl.length; i++) {
var parts = clTexts[i-1].split(',');
cl.options[i].text = parts[1];
cl.options[i].value = parts[2];
}
sortlist();
}
in body section
在身体部分
<form action="" method="get">
<p><label for="car_make"></label>
<select id="car_make" class="car_options" name="car_make">
<option value="">By Make</option>
<option value="Vauxhall">Vauxhall</option>
<option value="BMW">BMW</option>
<option value="Toyota">Toyota</option>
<option value="Lexus">Lexus</option>
<option value="Audi">Audi</option>
<option value="Ford">Ford</option>
</select>
<label for="car_color"></label>
<select name="car_color" id="car_color" class="car_options">
<option value="">By Color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select>
<input type="submit" name="search" id="search" value="Search">
</form>
回答by Satpal
Use document.getElementsByClassName('car_options')[0]
用 document.getElementsByClassName('car_options')[0]
getElementsByClassNamereturns a set of elements which have all the given class names.
getElementsByClassName返回一组具有所有给定类名的元素。
If you have multiple elements then we have to iterate it through. like
如果您有多个元素，那么我们必须对其进行迭代。喜欢
var elements = document.getElementsByClassName('car_options');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
}, false);
}
Note: In IE it is supported on IE9+
注意：在 IE 中，它在IE9+ 上受支持
EDIT
编辑
Updated Code
更新代码
function sortlist() {
var elements = document.getElementsByClassName('car_options');
for (var j = 0; j < elements.length; j++) {
var cl = elements[j];
var clTexts = new Array();
for (i = 1; i < cl.options.length; i++) {
clTexts[i - 1] = cl.options[i].text.toUpperCase() + "," + cl.options[i].text + "," + cl.options[i].value;
}
clTexts.sort();
for (i = 1; i < cl.options.length; i++) {
var parts = clTexts[i - 1].split(',');
cl.options[i].text = parts[1];
cl.options[i].value = parts[2];
}
}
}
回答by Arun Aravind
Your logic is wrong.
你的逻辑是错误的。
You are iterating over cl(which is the collection of all select lists).
您正在迭代 cl（这是所有选择列表的集合）。
Then accessing options of each list by the same index. Your code produces array out of bounds exception
然后通过相同的索引访问每个列表的选项。您的代码产生数组越界异常
