Javascript：获取所有带有 id id[x] 的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3717542/
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
Javascript: Get all elements with id id[x]
提问by abel
Using javascript how do I get the number of elements present with the id of id[x]?
使用javascript如何获取id为id [x]的元素数量？
Sample HTML:
示例 HTML：
<input name="vrow[0]" id="vrow[0]" value="0" type="text"/>
<input name="vrow[1]" id="vrow[1]" value="0" type="text"/>
<input name="vrow[2]" id="vrow[2]" value="0" type="text"/>
<input name="vrow[3]" id="vrow[3]" value="0" type="text"/>
The above html is generated depending on user input. How do I detect how many elements are present using javascript?
上面的html是根据用户输入生成的。如何使用javascript检测存在多少元素？
Currently I can detect presence of an element like this
目前我可以检测到这样的元素的存在
Sample Javascript
示例 Javascript
if(document.getElementById('vrow[0]')){
var row=0;
}
if(document.getElementById('vrow[1]')){
row=1;
}
...
回答by Andy E
[]are not valid characters in ID attributesin HTML4.01. Even in HTML5, however, you should use the name attribute (without the numeric indexes), and then use getElementsByName():
[]在 HTML4.01中的 ID 属性中不是有效字符。然而，即使在 HTML5 中，您也应该使用 name 属性（没有数字索引），然后使用getElementsByName()：
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
var vrows = document.getElementsByName("vrow");
alert(vrows.length);Note that older versions of IE and Opera may return elements with idattributes that have the same value as the name specified in getElementsByName(). IE may also return non-input elements with a name attribute that has the same value.
请注意，旧版本的 IE 和 Opera 可能会返回具有与getElementsByName() 中id指定的名称具有相同值的属性的元素。IE 也可能返回具有相同值的 name 属性的非输入元素。
回答by Vinay B R
var inputTags = document.getElementsByTagName('INPUT');
var count=0;
for(var i=0;i<inputTags.length;i++)
if(inputTags[i].id.contains('vrow[')
count++;
回答by Juan A. Navarro
If for some reason you want to stick with the names of your input elements you can use:
如果由于某种原因您想坚持使用输入元素的名称，您可以使用：
var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
var rows = inputs.filter(function (el) { return el.name.indexOf('vrow[') == 0 });
alert(rows.length);
回答by Mark Baijens
getElementById always returns one element (since id are unique). getElementsByName can result a list of elements.
getElementById 总是返回一个元素（因为 id 是唯一的）。getElementsByName 可以生成元素列表。
<html>
<head>
<script>
function getElements() {
var elements = document.getElementsByName("vrow[]");
alert(elements.length);
}
</script>
</head>
<body onload="getElements()">
<input name="vrow[]" id="vrow_0" value="0" type="text"/>
<input name="vrow[]" id="vrow_1" value="0" type="text"/>
<input name="vrow[]" id="vrow_2" value="0" type="text"/>
<input name="vrow[]" id="vrow_3" value="0" type="text"/>
</body>
</html>
回答by Mark Chorley
If you use a JavaScript library with a query function supporting CSS3, such as Prototype, you can use the attribute starts-with selector to find id attributes beginning with vrow[
如果您使用带有支持 CSS3 的查询功能的 JavaScript 库，例如 Prototype，您可以使用属性 starts-with 选择器来查找以 vrow[ 开头的 id 属性。
So in Prototype this would be
所以在原型中这将是
$$('input[id^=vrow[]').each
$$('input[id^=vrow[]').each
NB this is untested, you might have to escape the [ in the selector
注意这是未经测试的，您可能必须在选择器中转义 [
