Javascript: Получить все элементы с id id [x]

Использование javascript, как мне получить количество элементов, присутствующих с идентификатором 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;
    }
...

Ответ 1

[] не допустимые символы в атрибутах атрибутов в HTML4.01. Однако даже в 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);

Обратите внимание, что более старые версии IE и Opera могут возвращать элементы с атрибутами id, которые имеют то же значение, что и имя, указанное в getElementsByName(). IE также может возвращать элементы без ввода с атрибутом имени, имеющим то же значение.

Ответ 2

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

Ответ 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);

Ответ 4

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>

Ответ 5

Если вы используете библиотеку JavaScript с функцией запроса, поддерживающей CSS3, например Prototype, вы можете использовать атрибут start-with selector, чтобы найти атрибуты id, начинающиеся с vrow [

Итак, в Prototype это будет

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

NB это непроверено, вам может потребоваться избежать [в селекторе

Prototype $$ function