getElementByClassName und mach was mit den ids der Arrayelemente

[Elya]

Hallo,

hilfe, kann kein Javascript mehr! (Nicht daß ich jemals... ;-))

Ich blende verschiedene divs, die alle dieselbe CSS-class haben, aber unterschiedliche ids, einzeln via Javascript und mouseover auf einem Link ein. Das klappt (verkürzt) wie immer so:

if (lastlayer!=-1)  {hidelayer(lastlayer);}
 document.getElementById(layerid).style.display = "block";
 lastlayer=layerid;

(reduziert auf DOM-relevante Befehle, die Funktion hidelayer() funktioniert analog mit display = "none")

Nun möchte ich, nachdem diese divs einmal eingeblendet sind, dieselben an anderer Stelle, auf einem anderen Link, wieder ausblenden. Dort sind jedoch die ids nicht bekannt, deshalb sollen sie anhand ihrer gemeinsamen CSS-class identifiziert werden.

Diese schöne Funktion soll mir dabei helfen (ist nicht von mir, ich dachte aber, sie verstanden zu haben):

function getElementsByClassName(className)
      {
        var arr = new Array();
        var elems = document.getElementsByTagName("div");
        for(var i = 0; i < elems.length; i++)
        {

var elem = elems[i];
          var id = elem.getAttribute("id");
          var cls = elem.getAttribute("class");
          if(cls == className)
          {
            arr[arr.length] = id;

}
        }
        // ab hier ist es wieder von mir, ich will jetzt
        // die Array-Elemente mit style wieder unsichtbar stellen:

for (var j = 0; j < arr.length;j++){
            document.getElementById(arr[j]).style.display = "none"
        }
      }

Das klappt einwandfrei und ohne Fehlermeldung im Firefox. IE6 macht überhaupt nichts, auch keine Fehlermeldung. Es hakt in der unteren for-Schleife. Firefox hat hier als arr[j] sauber die Namen der ids zur Verfügung, IE kennt sie anscheinend nicht, ein alert(arr[j]) in der Schleife hat keinen Effekt. Frage ich in der oberen Schleife elems[i] ab, gibt mir Firefox [object HTMLdivElement] zurück, IE jedoch nur [object].

Leider hab ich es nicht mehr geschafft, eine Beispielseite zu basteln. Aber vielleicht sieht ja jemand von Euch meinen Denkfehler. Ich bin noch 10 Minuten, und dann erst heute abend wieder am Rechner.

Danke fürs Draufschauen.

Gruß aus Köln-Ehrenfeld,

Elya

[wahsaga]

hi,

Das klappt einwandfrei und ohne Fehlermeldung im Firefox. IE6 macht überhaupt nichts, auch keine Fehlermeldung. Es hakt in der unteren for-Schleife. Firefox hat hier als arr[j] sauber die Namen der ids zur Verfügung, IE kennt sie anscheinend nicht, ein alert(arr[j]) in der Schleife hat keinen Effekt.

heißt? gar keine alertbox, oder kein wert/undefined?
wenn ersteres: hat denn arr.length überhaupt einen wert im IE?

aber statt zwei mal durch den elementbaum zu klettern, würde es sich doch sowieso anbieten, beides in einer tour zu machen.

probiere mal, ob folgendes funktioniert:

function ShowHideByClassName(klassenName, displayValue)
      {
        var elems = document.getElementsByTagName("div");
        var laenge = elems.length;
        for(var i = 0; i < laenge; i++)
        {
          var elem = elems[i];
          var cls = elem.getAttribute("class");
          if(cls == klassenName)
          {
            elem.style.display = displayValue;
            // die referenz auf das element haben wir hier
            // sowieso gerade in den fingern, also können
            // wir den style doch auch gleich hier ändern
          }
        }
      }

aufruf mit klassenname und gewünschtem wert für display, also "none" oder "block".

ShowHideByClassName("divklasse1", "block");
ShowHideByClassName("divklasse1", "none");

gruß,
wahsaga

[Elya]

Hallo wahsaga,
danke für die Antwort.

heißt? gar keine alertbox, oder kein wert/undefined?
wenn ersteres: hat denn arr.length überhaupt einen wert im IE?

genau, überhaupt keine alertbox. Weiteres muß ich morgen prüfen, wenn ich wieder an Windows hocke, mein Safari reagiert genauso wie Firefox, und den ollen IE Mac tu ich mir heute abend nicht mehr an... ;-)

aber statt zwei mal durch den elementbaum zu klettern, würde es sich doch sowieso anbieten, beides in einer tour zu machen.

stimmt, ich probiere das morgen gleich aus! Dankeschön.

Gruß aus Köln-Ehrenfeld,

Elya

[Frank Hammerschmidt]

Hallo Elya,

die Zeile, die unterschiedlich interpretiert wird, ist

var cls = elem.getAttribute("class");

Der MSIE  liefert den Klassennamen über "elem.className",
elem.getAttribute("class") wird garantiert "null" sein.

Also gilt << elem.className!=elem.getAttribute("class") >>

Somit ist Dein Array leer, also arr.length=0;

Nach meinem Test kann man mit "Mozilla/Firebird" auch "className" abfragen.

Tschau

Frank

[Elya]

Hallo Frank,

die Zeile, die unterschiedlich interpretiert wird, ist

var cls = elem.getAttribute("class");

Der MSIE  liefert den Klassennamen über "elem.className",
elem.getAttribute("class") wird garantiert "null" sein.

ich hatte className irgendwie in Verbindung mit document.all in Erinnerung, was ja inzwischen ziemlich obsolet ist. Vielleicht täusche ich mich da auch.

Nach meinem Test kann man mit "Mozilla/Firebird" auch "className" abfragen.

Das probiere ich dann morgen auch gleich mal aus. Danke für die Antwort!

Gruß aus Köln-Ehrenfeld,

Elya

[molily]

Hallo,

className ist im W3C DOM 1 HTML standardisiert, sollte also von allen halbwegs modernen Browsern unterstützt werden. Sollte in SELFHTML auch relativ abseits von document.all beschrieben sein:
http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften
Taucht aber auch im Zusammenhang mit document.all auf, weil es ursprünglich eine MSIE-4-Erfindung war, wenn ich mich nicht irre:
http://de.selfhtml.org/javascript/objekte/all.htm#class_name

Mathias

[MudGuard]

Hi,

Ergänzend zum bereits gesagten:

function getElementsByClassName(className)
      {
        var arr = new Array();
        var elems = document.getElementsByTagName("div");

Warum schränkst Du hier auf divs ein? Die Funktion sollte dann getDivsByClassName heißen - oder aber nicht auf divs eingeschränkt werden.

for(var i = 0; i < elems.length; i++)
        {

var elem = elems[i];
          var id = elem.getAttribute("id");
          var cls = elem.getAttribute("class");
          if(cls == className)

Das class-Attribut kann eine whitespace-separierte Liste von Klassennamen enthalten.

{
            arr[arr.length] = id;

Warum legst Du im array die id ab, anstatt direkt die Elemente dort zu speichern?

}
        }
        // ab hier ist es wieder von mir, ich will jetzt
        // die Array-Elemente mit style wieder unsichtbar stellen:

Das folgende hat in getElementsByClassName nichts verloren - die Funktion sollte das Array der Elemente zurückliefern (oder einen anderen Namen tragen).

for (var j = 0; j < arr.length;j++){
            document.getElementById(arr[j]).style.display = "none"
        }

}

cu,
Andreas

[Christian Seiler]

Hallo Elya,

Diese schöne Funktion soll mir dabei helfen (ist nicht von mir, ich dachte aber, sie verstanden zu haben):

function getElementsByClassName(className)

Nimm doch die Version von Thomas Meinike: < http://www.styleassistant.de/tips/tip100.htm>

Dann dürfte es sehr einfach sein, alle auszublenden.

function alle_ausblenden () {
  var container = getElementsByClassName('klasse');
  for (var i = 0; i < container.length; i++) {
    container[i].style.display = "none";
  }
}

Viele Grüße,
Christian

[Elya]

Hallo Christian,

Nimm doch die Version von Thomas Meinike: http://www.styleassistant.de/tips/tip100.htm

Ich wußte, daß ich das irgendwo schon mal gesehen hatte... funktioniert einwandfrei

Dann dürfte es sehr einfach sein, alle auszublenden.

in der Tat, super, funktioniert. Leider habe ich im Moment keine Zeit, die anderen Varianten experimentell durchzuspielen, da ich ziemlich im Streß bin (deshalb auch meine Abstinenz hier :-( ) - Ihr habt mir alle sehr geholfen, danke!

Gruß aus Köln-Ehrenfeld,

Elya