Javascript: Obtenga todos los elementos con ID id [x]

Usando javascript, ¿cómo obtengo el número de elementos presentes con el id de id [x]?Javascript: Obtenga todos los elementos con ID id [x]

HTML de ejemplo:

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

El HTML anterior se genera dependiendo de la entrada del usuario. ¿Cómo puedo detectar cuántos elementos están presentes usando javascript?

Actualmente puedo detectar la presencia de un elemento como este

Muestra Javascript

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

Fuente

2010-09-15 abel

[]are not valid characters in ID attributes en HTML4.01. Incluso en HTML5, sin embargo, se debe utilizar el atributo de nombre (sin los índices numéricos), y luego usar 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);

Tenga en cuenta que las versiones antiguas de IE y Opera pueden devolver elementos con id atributos que tienen el mismo valor que el nombre especificado en getElementsByName(). IE también puede devolver elementos que no sean de entrada con un atributo de nombre que tenga el mismo valor.

Fuente

2010-09-15 12:29:56

Fwiw, getElementsByName() no es compatible con Internet Explorer u Opera. O más bien, es compatible, pero no correctamente: http://www.quirksmode.org/dom/w3c_core.html – Robusto

gracias. lo básico importa – abel

@Robusto: siempre que esté atento a esos problemas, no debería haber ningún problema. Actualicé mi respuesta para reflejar eso. –

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

Fuente

2010-09-15 12:30:50

interesante. pero obtengo un objeto no es compatible con esta propiedad o método. – abel

getElementById siempre devuelve un elemento (ya que id es único). getElementsByName puede dar como resultado una lista de elementos.

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

Fuente

2010-09-15 12:32:17

Si utiliza una biblioteca de JavaScript con un CSS3 función de consulta de apoyo, como prototipo, puede utilizar el atributo comienza-con selector de encontrar atributos ID comenzando con vrow [

Así que en Prototipo esto sería ser

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

NB esto no se ha probado, puede que tenga que escapar de la [en el selector

Prototype $$ function

Fuente

2010-09-15 12:38:29

Si por alguna razón se quiere seguir con los nombres de los elementos de entrada que puede utilizar:

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

Fuente

2011-10-27 14:13:47

Javascript: Obtenga todos los elementos con ID id [x]

Respuesta

Cuestiones relacionadas