[JavaScript] getElements by ClassName

[Timo Trallala]

Hallo,

also im FF geht es einwandfrei, nur der IE bricht nach bei der Schleife ab! Weiss jemand warum

        var elementList = document.getElementsByClassName("menuItemSelect");

        for (var i = 0; i < elementList.length; i++)
            {
            elementList[i].childNodes[1].className = 'normal';
            }

weiss echt nicht was das soll!

Danke der Trallala!

[wahsaga]

Re: [JavaScript] getElements by ClassName

Und document.getElementsByClassName liefert was?

Du greifst auf den ersten Kindknoten zu - sicher, dass der existiert?

[Timo Trallala]

Ja bin ich und sagt mir auch der DOM-Inspektor, allerdings hab ich des Rätsels Lösung.

Es handelt sich in diesem Fall um ein db-generiertes Menu. Es werden leere text-nodes bei der Generierung mit php erzeugt. IE und FF gehen damit unterschiedlich um.

// removes whitespace-only text node children
cleanWhitespace: function(element) {
  element = $(element);
  for (var i = 0; i < element.childNodes.length; i++) {
    var node = element.childNodes[i];
    if (node.nodeType == 3 && !/S/.test(node.nodeValue))
      Element.remove(node);
  }
}

Schon reagieren beide gleich!

Gruß
Timo

[prego]

for (var i = 0; i < elementList.length; i++){
  elementList[i].getElementsByTagName('li')[0].className = 'normal';
} 

nur mal so als Denkanstoß, bevor du jetzt anfängst ne Browserweiche ein zu bauen


Btw: Wenn man das ganze der DOM erzeugt, behandeln es IE und FF gleich. Dann gibt es keine #textNode's dazwischen.


//edit:

Wobei das hier dann noch einfacher/richtiger wäre:

var elementList = document.getElementsByClassName("menuItemSelect").getElementsByTagName('li');

for (var i = 0; i < elementList.length; i++){
  elementList[i].className = 'normal';
} 

[Timo Trallala]

document.getElementsByClassName("menuItemSelect").getElementsByTagName is not a function

Nochmal ... dieses Menu wird aus der datenbank generiert.

grob sieht das so aus: z.b

<ul id="menu">
  <li class="menuItem"><a>xxx</a></li>
  <li class="menuItem"><a>xxx</a>
       <ul style="display:none;">
            <li class="menuItemSelect"><a>xxx</a></li>
       </ul></li>

jetzt gehts halt darum, wenn li noch ein ul enthält, display:''

gruß
Trallala

[wahsaga]

Original geschrieben von Timo Trallala
document.getElementsByClassName("menuItemSelect").getElementsByTagName is not a function

Wo hast du denn document.getElementsByClassName her? Da das kein Standard ist, dürfte das doch wohl 'ne selbstdefinierte Methode sein ...?

Da die vermutlich etwas anderes liefert als die nativ implementierten getElement(s)By-Methoden - die liefern eine NodeList - kannst du darunter auch nicht einfach andere Methoden anwenden, die eine NodeList sonst so besitzt.

[unset]

Original geschrieben von wahsaga
Wo hast du denn document.getElementsByClassName her? Da das kein Standard ist, dürfte das doch wohl 'ne selbstdefinierte Methode sein ...?

Stimmt. Ist aus Prototype.

[prego]

Also, du willst das alle UL's die unterhalb der "ersten" Ebene (LI) liegen eine anderen Klasse bekommen?

var menu_li = document.getElementById('mein_menu').childNodes;

for(i = 0; i < menu_li.length; i++){
  if(my_ul = menu_li.getElementByTagName('ul') ){
    my_ul.className = 'andere_klasse';
  }
} 

Oder hab ich dich jetzt komplett falsch verstanden? Was soll es eigentlich werden?

PS: Das ist nur ein Denkanstoß und kein getester Code.

PPS: prototype's getElementsByClassName liefer vollwertige Node's zurück. http://www.prototypejs.org/api/eleme...ntsByClassName - Extended heißt in dem Zusammenhang nur, das es um Prototype's Methoden erweitert wurde.

[wahsaga]

Original geschrieben von prego
PPS: prototype's getElementsByClassName liefer vollwertige Node's zurück.

Ja - aber als Array, und nicht als NodeList.

Und deshalb kann man "darunter" nicht weitere Methoden wie getElementsByTagName o.ä. aufrufen, die ein Array nun mal nicht hat. Ausser - man würde auch Array per Prototype (gemeint ist das Prototype-Konzept von OOP in JS, nicht der Name des Frameworks) erweitern.

[Timo Trallala]

O.K. hab das jetzt ein wenig umständlich gemach ... und wenn sich jemand wundert, was der Unsinn soll, so mss ich sagen, dass es halt funktioniert.

Der ganze Krempel muss so sein, da,, wenn man das menu via php aus einer DB generiert, leere Textnodes eingefügt werden.

function getMenuContent(param)
    {
    param = param.split("?");
    link = param[1].split("=");
	
	var elementList = $(link[1]).parentNode;
	
	var node = $(link[1]).parentNode.lastChild;
	
	var cnt = elementList.getElementsByTagName("UL")

    if (cnt.length == 1)
        {
       // hideTopLevels();
        Effect.SlideDown(node,
            {
            duration: 0.2
            });

        return false;
        }

    hideTopLevels();
    var myAjax = new Ajax.Request('inc/content.php',
        {
        method: 'get',
        parameters: param[1],
        onComplete: function(e)
            {
            $('col3_content').innerHTML = e.responseText;
            }
        });
    }

Gruß
derTrallala

[prego]

@wahsaga: klingt logisch - aber bist du dir sicher, das da keine NodeList zurück kommt? Hab grad keine Zeit zu testen...

[Timo Trallala]

http://wiki.script.aculo.us/scriptac...ntsByClassName