2010-09-15 5 views
10

Использование javascript, как получить количество элементов с идентификатором id [x]?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?

В настоящее время я могу обнаружить присутствие элемента, как этот

Sample Javascript

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

ответ

16

[]are not valid characters in ID attributes в HTML4.01. Даже в 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 может возвращать элементы с id атрибутов, которые имеют то же значение, что и имя, указанное в getElementsByName(). IE также может возвращать элементы без ввода с атрибутом name, который имеет такое же значение.

+0

FWIW, getElementsByName() не поддерживается в IE или Opera. Вернее, он поддерживается, но не корректно: http://www.quirksmode.org/dom/w3c_core.html – Robusto

+0

спасибо. основы вопрос. – abel

+0

@Robusto: Если вы ищете эти проблемы, проблем не должно быть. Обновленный мой ответ, чтобы отразить это. –

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

интересный. но я получаю объект не поддерживает это свойство или метод. – abel

2

getElementById всегда возвращает один элемент (поскольку идентификаторы уникальны). 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> 
2

Если вы используете библиотеку JavaScript с функцией запроса с поддержкой CSS3, такие как прототип, вы можете использовать атрибут начинается, с селектором, чтобы найти идентификатор атрибутов, начиная с vrow [

Таким образом, в прототипе это будет быть

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

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

Prototype $$ function

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); 
Смежные вопросы