Peter: Javascript-Problem

Beitrag lesen

Hallo Friedel!

Deine Beschreibung macht einige Vorgaben ohne die zu erklären. Ich rate dir mal zu erklären was du am Ende bauen möchtest. Ansonsten verzetteln wir uns schnell.

Ich vermute du willst eine aufklappbare Ordnerstruktur bauen, nicht wahr? Dazu sind viele Lösungen denkbar, die in Javascript mglw. einfacher umzusetzen sind. Kommt z.B. jQuery in Frage?

Oder kannst du nicht das PHP Script ändern sodass es für JS freundlicheres HTML ausspruckt? Warum muss JS Bilder und Text in ein Element einschließen? Geht das nicht mit einem Tag im HTML Template? Fragen über Fragen ;-D

In jedem <li>, das eine <ul> enthält

Also mit getElementsByTagName oder querySelectorAll findest du diese Elemente.

Mit parentNode, children, childNodes, firstChild, firstElementChild u.s.w. kannst du dich im DOM bewegen und nahe Elemente finden.

querySelector und querySelectorAll gibts auch an einzelnen Elementen. Du kannst Z.B. erst mit document.querySelectorAll("LI") alle LI finden. Dann bei jedem LI mit li.querySelector('UL') prüfen ob sie eine UL enthalten.

Es gibt zwar :has für diesen Fall aber das unterstützen noch nicht viele (kein??) Browser.

Wie gesagt sind versch. Lösungen möglich die aber am Ende des Tages alle die Standard DOM Methoden verwenden.

sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden,

Mit document.createElement kannst du Elemente erzeugen. Mit addEventListener kannst du ihnen Event-Handler verpassen. Das ist besser als href="javascript:".

Mit appendChild kannst du schon vorhandene DOM Nodes ans neue Element hängen und damit verschieben. Und am Ende das neue Element an der alten Stelle (dem LI?) wieder ins DOM hängen.

Die bestehenden Nodes wären soweit ich dich verstehe die IMG Elemente und Textnodes danach. Die findest du in den childNodes des LIs. Die kannst du mit einer for Schleife durchlaufen. Das UL ignorierst du dabei (tagName == "UL").

wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.

Eine fortlaufende Nummer bekommst du wenn du mit einer for Schleife durch den ElementArray läufst.

Du willst wohl eine Verknüpfung zwischen A und UL über die ID erzeugen. Mir dünkt das ist nicht vonnöten! ;-D In einem Eventhandler beim A kannst du das zugehörige UL auch ohne ID finden. Es ist ausgehend vom event.target wahrsch. das nextSibling.

Gruß Peter