Javascript：获取id为id [x]的所有元素

Question

Using javascript how do I get the number of elements present with the id of id[x]? 使用javascript如何获取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. 上面的html是根据用户输入生成的。 How do I detect how many elements are present using javascript? 如何使用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;
    }
...

Answer 1

[] are not valid characters in ID attributes in HTML4.01. [] 不是 HTML4.01 中ID属性中的有效字符。 Even in HTML5, however, you should use the name attribute (without the numeric indexes), and then use getElementsByName() : 但是，即使在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 id attributes that have the same value as the name specified in getElementsByName() . 请注意，旧版本的IE和Opera可能会返回id属性与getElementsByName（）中指定的名称相同的元素。 IE may also return non-input elements with a name attribute that has the same value. IE还可以返回具有相同值的name属性的非输入元素。

Answer 2

var inputTags = document.getElementsByTagName('INPUT');
var count=0;
for(var i=0;i<inputTags.length;i++)
if(inputTags[i].id.contains('vrow[')
count++;

Answer 3

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

Answer 4

getElementById always returns one element (since id are unique). getElementById总是返回一个元素（因为id是唯一的）。 getElementsByName can result a list of elements. 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>

Answer 5

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 selector来查找以vrow开头的id属性[

So in Prototype this would be 所以在原型中这将是

$$('input[id^=vrow[]').each

NB this is untested, you might have to escape the [ in the selector 注意这是未经测试的，你可能不得不逃避[在选择器中

Prototype $$ function 原型$$功能

Javascript：获取id为id [x]的所有元素

问题描述

5 个解决方案

解决方案1
17 已采纳 2010-09-15 12:29:56

解决方案2
4 2010-09-15 12:30:50

解决方案3
3 2011-10-27 14:13:47

解决方案4
2 2010-09-15 12:32:17

解决方案5
2 2010-09-15 12:38:29

Javascript：获取id为id [x]的所有元素

问题描述

5 个解决方案

解决方案1 17 已采纳 2010-09-15 12:29:56

解决方案2 4 2010-09-15 12:30:50

解决方案3 3 2011-10-27 14:13:47

解决方案4 2 2010-09-15 12:32:17

解决方案5 2 2010-09-15 12:38:29

解决方案1
17 已采纳 2010-09-15 12:29:56

解决方案2
4 2010-09-15 12:30:50

解决方案3
3 2011-10-27 14:13:47

解决方案4
2 2010-09-15 12:32:17

解决方案5
2 2010-09-15 12:38:29