Alle Elem. einer Klasse visible/hidden setzten

[Steffen Flämig]

Hallo,

ich haben einige <div>'s, alle gehören zur selben class="foo" und jede hat ihre id="bar1" , id="bar2" usw..

Jetzt möchte ich alle gleichzeitig visible bzw. hidden setzten.
Geht das nur indem ich jedes einzelne per document.getElementById("bar1").style.visibility = "visible"; anspreche oder kann ich auch die ganze Klasse verändern?

Gruß
Steffen

[wahsaga]

hi,

ich haben einige <div>'s, alle gehören zur selben class="foo" und jede hat ihre id="bar1" , id="bar2" usw..

Jetzt möchte ich alle gleichzeitig visible bzw. hidden setzten.
Geht das nur indem ich jedes einzelne per document.getElementById("bar1").style.visibility = "visible"; anspreche oder kann ich auch die ganze Klasse verändern?

Du könntest den Nachfahrenselektor sinnvoll nutzen.

Übergeordnetes Element (wenn kein weiteres vorhanden, body) bekommt Klasse .hideFoos o.ä. zugewiesen, und im CSS ist
.hideFoos div.foo { visibilty:hidden; }
definiert.

Ansonsten suche nach getElementsByClassName.

gruß,
wahsaga

[Michael]

Hallo,

ich haben einige <div>'s, alle gehören zur selben class="foo" und jede hat ihre id="bar1" , id="bar2" usw..

Jetzt möchte ich alle gleichzeitig visible bzw. hidden setzten.
Geht das nur indem ich jedes einzelne per document.getElementById("bar1").style.visibility = "visible"; anspreche oder kann ich auch die ganze Klasse verändern?

Was recht einfach geht, ist alle Divs des Dokuments zu durchlaufen und zu prüfen, ob die klasse foo ist:

var Divs = document.getElementsByTagName("DIV");
for (var i=0; i<Divs.length; i++)  {
 if (Divs[i].className == "foo") Divs[i].style.display = "none";
}

Grüße

Michael

[peterS.]

gruss Steffen,

...getElementsBy... funktionen bzw. methoden gibt es, wie
gerade beispielhaft verlinkt, mittlerweile wie sand am meer.

Du braeuchtest ein "document.getElementsByClassName(s)".

der urheber einer solchen oder gar der ersten ihrer art
ist uebrigens, und zumindest fuer mich erwiesenermassen,
Thomas Meinike - archiv:

http://forum.de.selfhtml.org/archiv/2002/12/t31500/#m170452

alle dieser getter liefern als ergebnis arrays oder
anderweitig iterierbare objekte voller elementknoten
zurueck, sodass es recht einfach fuer Dich sein sollte,
das erscheinungsbild dieser elemente zu veraendern.

anmerkung:

die anforderung, an das clientseitige scripting
heutiger webanwendungen steigen immer mehr - ein
beweis fuer des programmierers beduerfnis nach
mehr abstraktion beim manipulieren von benutzer-
oberflaechen sind die in den letzten jahren mit
zunehmender geschwindigkeit entstandenen
frameworks, bibliotheken und spezialeffekt-scripte.

eine meiner meinung nach immer noch nicht genuegend
wahrgenommene und daher auch noch viel zu zu wenig
verwendung findende technik steckt im konzept der
iteratoren - zwangseingefuehrt in geckos vor rund
anderthalb jahren im zuge von JavaScript 1.6 von mozilla.org.

die loesung deines problems waere damit ein fast
schon eleganter, auf alle faelle aber ausdrucksstarker
einzeiler - fuer die lesbarkeit im bsp. wird es ein
dreizeiler:

Array.forEach(document.getElementsByClassNames("foo"), function(elm/*, idx, arr*/) {  
 elm.style.display = "none";  
});

... zu [[Array]]-iteratoren aktuell noch im forum siehe auch:
https://forum.selfhtml.org/?t=146774&m=952621

so long - peterS. - [e-mail]