HTML-Element innerhalb einer Klasse ansprechen

[Tommi]

Hallo,

folgendes Beispiel:

  
<ul id="nr-1">  
<li>a</li>  
<li>b</li>  
</ul>  
  
<ul id="nr-2">  
<li>s</li>  
<li>d</li>  
</ul>  

Wie kann ich nun alle <li>s in <ul id="nr-2"> ansprechen?

Irgendwie so?!
document.getElementById('nr-2').???.???.li.style.display = 'block';

Danke
Tom

[D.R.]

Hallo,

Wie kann ich nun alle <li>s in <ul id="nr-2"> ansprechen?

Irgendwie so?!
document.getElementById('nr-2').???.???.li.style.display = 'block';

Entweder per getElementsByTagName():

  
var LIs = document.getElementById('nr-2').getElementsByTagName("li"); //Alle IDs als Collection speichern  
for (var i = 0; i < LIs.length; i++) //Alle Elemente der Collection durchalufen  
 LIs[i].style.display = 'block'; //Style-Property setzen  

Oder per ChildNodes:

  
var LIs = document.getElementById('nr-2').childNodes; //Alle IDs als Array speichern  
for (var i = 0; i < LIs.length; i++){ //Alle Elemente der Collection durchalufen  
 if (LIs[i].nodeType == 1 && LIs[i].nodeName == "li")  
  LIs[i].style.display = 'block'; //Style-Property setzen  
}  

Letztere Variante solltest du verwenden, wenn sich innerhalb der <li>s eine weitere Liste befindet, die du nicht ansprechen willst.

mfg. Daniel

[Tommi]

Hallo Daniel,

var LIs = document.getElementById('nr-2').getElementsByTagName("li"); //Alle IDs als Collection speichern
for (var i = 0; i < LIs.length; i++) //Alle Elemente der Collection durchalufen
LIs[i].style.display = 'block'; //Style-Property setzen

  
Super, das klappt, vielen Dank!  
  
Tom

[frankx]

Hellihello,

warum gibts du dem ul denn nicht noch eine Klasse und machst es dann mit CSS?

Gruß,

frankx

[Tommi]

Hallo frankx,

warum gibts du dem ul denn nicht noch eine Klasse und machst es dann mit CSS?

Ja, schon klar, das ganze soll aber etwas interaktiver werden. Also, dass man per Klick bestimmte Elemente ein- und ausblenden kann.

Tom