getElementById

[hansjo]

Hallo zusammen,

ich habe eine Liste mit variabler Anzahl von div-Elementen mit durchnummerierten ID's

<div ID="id_0">Text1</div>  
<div ID="id_1">Text2</div>  
...

Nun möchte ich der Reihe nach auf alle Elemente zugreifen um die Display-Eigenschaft zu ändern (e.style.display = "none")

Nachdem ich nicht darauf komme wie ich die ID's herausfinden kann (und auch nix finde) habe ich mir folgende script überlegt

function closeDetails() {  
 for (i = 0; i < 50; i++) {  
  var id = 'id_' + i;  // id = 'id_2';  
  var e = document.getElementById(id);  
  if (e.style.display == "block")  
   e.style.display = "none";  
 }  
 return false;  
}

Leider funktioniert es an einer Stelle nicht und mir ist nicht klar warum? das 'getElementById' geht mit der zusammengebauten id nicht. Wenn ich aber zum Test die => id='id_2'; setze funktioniert es (für id_2 :-)

Frage:

• was mache ich falsch - wie komme ich zum gewünschten Ergebnis?
• gibt es eine gute Möglichkeit alle vorhandenen ID's herauszufinden und zu durchlaufen?

Vielen Dank für kompetenten Rat!
(dass ich ein JS-Anfänger bin geht vermutlich aus meiner Frage hervor und ich kann hoffentlich mit der gebotenen Rücksicht und Anteilnahme rechnen ;-)

[Struppi]

Leider funktioniert es an einer Stelle nicht und mir ist nicht klar warum?

Gibt es eine Fehlermeldung? (_Du weißt wo du diese findest in deinem Browser?)

Struppi.

[hansjo]

ok - danke für alle Antworten! das Problem hat nach einem Neustart des sytems (Browser und Apache) aufgelöst und mein script läuft. (?)

Habe trotzdem aus den Antworten was gelernt! und ich werde nun auch mal schauen ob ich es mit getElementsByClassName() etwas ordentlicher hinbekomme.

[Gunnar Bittersmann]

@@hansjo:

nuqneH

und ich werde nun auch mal schauen ob ich es mit getElementsByClassName() etwas ordentlicher hinbekomme.

Du solltest schauen, dass du es OHNE getElementsByClassName() hinbekommst. Und auch gänzlich ohne JavaScript.

Gib allen auszublendenden Elementen eine Klasse ("eingeklappt"?) und blende sie mit CSS aus: '.eingeklappt {display: none}'.

Für das jeweilige gewünschte Element setzt du 'diplay' auf "block" – für moderne Browser ist dafür kein JavaScript erforderlich.

Qapla'

[ChrisB]

Hi,

Nun möchte ich der Reihe nach auf alle Elemente zugreifen um die Display-Eigenschaft zu ändern (e.style.display = "none")

Zu welchem Zweck?

Alle Elemente zu durchlaufen, dürfte vermutlich nicht die performanteste und cleverste Lösung sein.

MfG ChrisB

[molily]

function closeDetails() {
for (i = 0; i < 50; i++) {
  var id = 'id_' + i;  // id = 'id_2';
  var e = document.getElementById(id);
  if (e.style.display == "block")

Lass dir den Wert der display-Eigenschaft mal ausgeben (mit alert(), console.log() oder ähnlich). Da wirst du vermutlich sehen, dass es ein leerer String ist. style ist nicht zum Auslesen der gegenwärtigen Eigenschaftswerte geeignet, es sei denn man hat sie vorher auf diese Weise oder mit Inline-Styles (style="display:block") gesetzt.

Wenn diese Funktion ohnehin nur verstecken soll, dann kannst du dir die Abfrage, ob das Element sichtbar ist, auch sparen und direkt verstecken. Wichtiger wäre die Abfrage, ob e ein Element enthält, also if (e) {}.

Lediglich eine Toggle-Funktion, die einblenden und ausblenden kann, müsste eine Abfrage des aktuellen display-Wertes durchführen. Angenommen, das Element ist standardmäßig sichtbar und wird nur direkt per JavaScript (über .style.display = "none") unsichtbar gemacht, dann fragst du besser das Gegenteil ab:

var style = e.style;
style.display = style.display != "none" ? "none" : "block";

das 'getElementById' geht mit der zusammengebauten id nicht.

alert(id);
Liefert das die richtigen IDs?

• gibt es eine gute Möglichkeit alle vorhandenen ID's herauszufinden und zu durchlaufen?

Dafür gibt es Klassen. Neuere Browser kennen document.getElementsByClassName(), für alle weiteren gibt es ausgereifte Selektor-Engines. Die sind in den üblichen JavaScript-Frameworks eingebaut, aber auch separat erhältlich und verwendbar. Z.B. Sizzle, Sly oder Peppy.