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

Question

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

11

如何使用JavaScript获取具有id为id[x]的元素的数量？

示例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"/>

以上HTML是根据用户输入生成的。我如何使用JavaScript检测有多少个元素存在？

目前，我可以像这样检测元素的存在：

示例JavaScript代码

if(document.getElementById('vrow[0]')){
var row=0;
    }
if(document.getElementById('vrow[1]')){
row=1;
    }
...

- abel

5个回答

4

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

- Vinay B R

有趣。但我得到了“对象不支持此属性或方法”的错误。 - abel

3

如果由于某种原因您想要保留输入元素的名称，您可以使用以下方式：

var inputs = Array.prototype.slice.call(document.getElementsByTagName('input'));
var rows = inputs.filter(function (el) { return el.name.indexOf('vrow[') == 0 });
alert(rows.length);

- Juan A. Navarro

2

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>

- Mark Baijens

2

如果您使用支持CSS3的查询函数的JavaScript库，例如Prototype，您可以使用属性以vrow[开头的选择器来查找以vrow[开头的id属性。

因此，在Prototype中，这将是：

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

注意：这是未经测试的，您可能需要转义选择器中的 [。

原型 $$ 函数

- Mark Chorley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

[]在HTML4.01中不是有效的ID属性字符。即使在HTML5中，您也应该使用名称属性（没有数字索引），然后使用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);

请注意，旧版本的IE和Opera可能会返回具有与在getElementsByName()中指定的名称相同值的id属性的元素。 IE还可能返回具有相同值的名称属性的非输入元素。