Javascript: Erhalten Sie alle Elemente mit ID [x]

Mit Javascript Wie bekomme ich die Anzahl der Elemente mit der ID von ID [x]?Javascript: Erhalten Sie alle Elemente mit ID [x]

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

Die obige HTML erzeugt je nach Benutzereingabe. Wie erkenne ich mithilfe von JavaScript, wie viele Elemente vorhanden sind?

Zur Zeit kann ich Vorhandensein eines Elements erkennen wie diese

Beispiel Javascript

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

Quelle

2010-09-15 abel

[]are not valid characters in ID attributes in HTML4.01. Auch in HTML5, jedoch sollten Sie den Namen Attribut verwenden (ohne die numerischen Indizes) und verwenden Sie dann 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);

Beachten Sie, dass ältere Versionen von IE und Opera Elemente mit id Attribute zurückgeben kann, die haben derselbe Wert wie der in angegebene Name getElementsByName(). IE kann auch Nichteingabeelemente mit einem Namensattribut zurückgeben, das denselben Wert hat.

Quelle

2010-09-15 12:29:56

FWIW, getElementsByName() in IE oder Opera nicht unterstützt. Oder besser gesagt, es wird unterstützt, aber nicht korrekt: http://www.quirksmode.org/dom/w3c_core.html – Robusto

danke. Grundlagen sind wichtig. – abel

@Robusto: Vorausgesetzt, Sie achten auf diese Probleme, sollte es keine Probleme geben. Meine Antwort wurde aktualisiert, um das widerzuspiegeln. –

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

Quelle

2010-09-15 12:30:50

interessant. aber ich bekomme ein Objekt unterstützt diese Eigenschaft oder Methode nicht. – abel

getElementById gibt immer ein Element zurück (da id eindeutig sind). getElementsByName kann eine Liste von Elementen ergeben.

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

Quelle

2010-09-15 12:32:17

Wenn Sie eine JavaScript-Bibliothek mit einer Abfragefunktion unterstützt CSS3, wie Prototype verwenden, können Sie das Attribut beginnt-mit Selektor-ID zu finden Attribute mit VRow Anfang [

in Prototype So würde dies sein

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

NB dies nicht getestet ist, müssen Sie möglicherweise die [in der Auswahl entkommen

Prototype $$ function

Quelle

2010-09-15 12:38:29

Wenn Sie aus irgendeinem Grund mit den Namen Ihrer Eingabeelemente haften möchten Sie verwenden können:

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

Quelle

2011-10-27 14:13:47

Javascript: Erhalten Sie alle Elemente mit ID [x]

Antwort

Verwandte Themen