Friedel: Javascript-Problem

Beitrag lesen

Hallo, ich habe mich lange Zeit nicht mit DOM-Manipulationen befasst und komme im Moment nicht weiter. Ich hoffe, mir kann jemand helfen.

In einer Seite, die mit Php generiert wird, soll clientseitig einiges verändert werden. Es geht um eine Liste <ul> mit vielen <li>, die teilweise wiederum <ul> enthalten.

Jedes <li> ist nach folgendem Schema aufgebaut: <li>, 1 bis 5 Bilder mit class="ex_bild", genau 1 Bild mit class="listicon", ein kurzer Text

Dann gibt es 2 Möglichkeiten. Entweder endet das <li> mit </li>, oder es folgt ein Zeilenumbruch im Quellcode (also nicht in der Browserausgabe - kein <br>) und es folgt eine <ul>, die wieder mindestens 1 <li> enthält, das nach diesem Schema aufgebaut ist. Nach dieser <ul> flogt dann wieder ein Zeilenumbruch im Quellcode und dann das </li>.

Ein Beispiel:

<ul>
  <li><img src="Bild_5.gif" alt="" class="listicon">Text 1
    <ul>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 2</li>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 3</li>
      <li><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_3.gif" alt="" class="listicon">Text 4</li>
      <li><img src="Bild_4.gif" alt="" class="ex_bild"><img src="Bild_5.gif" alt="" class="listicon">Text 5</a>
        <ul>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 6</li>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 7</li>
          <li><img src="Bild_6.gif" alt="" class="ex_bild"><img src="Bild_1.gif" alt="" class="ex_bild"><img src="Bild_2.gif" alt="" class="listicon">Text 8</li>
        </ul>
  </li>
</ul>

(Ich hoffe, der Quellcode sieht im Beitrag nicht so aus wie die Vorschau, sondern so, wie laut Beschreibung aussehen sollte.)

Folgende Veränderungen sollen durch das Script erreicht werden: In jedem <li>, das eine <ul> enthält, sollen alle Bilder und der Text in > <a href="javascript:ordnerlink('o1')"></a> eingeschlossen werden, wobei die 1 von 'o1' durch eine fortlaufende Nummer ersetzt werden soll. Und das enthaltene <ul> soll zu <ul id="o1"> erweitert werden.