JQuery Kochbuch (German Edition)

class='remove'>Name

Name

Name

Name

Name

Name

Name

Name

    Die neue DOM-Struktur, die hinzugefügt wird, ist ein String-Parameter, der der Methode
replaceWith()
übergeben wird. In unserem Beispiel werden alle

-Elemente mit dem Klassen-Attribut
remove
durch die neue Struktur

entfernt

ersetzt.
    Diskussion
    jQuery bietet mit der Methode
replaceAll()
auch eine »umgekehrte« Möglichkeit an, bei der die Parameter vertauscht sind. So könnten wir den jQuery-Code aus unserem Beispiel auch so schreiben:
jQuery('

entfernt

').replaceAll('li.remove');
    Hier übergeben wir der jQuery-Funktion den HTML-String und nutzen dann die Methode
replaceAll()
, um die DOM-Knoten und deren Kinder auszuwählen, die entfernt und ersetzt werden sollen.

DOM-Elemente klonen
    Problem
    Sie brauchen einen Klon beziehungsweise eine Kopie des DOM.
    Lösung
    jQuery stellt die Methode
clone()
bereit,um DOM-Elemente zu kopieren. Sie lässt sich ganz leicht anwenden. Selektieren Sie nur die DOM-Elemente mit der jQuery-Funktion und rufen Sie dann die Methode
clone()
für das selektierte Set auf. Das Ergebnis ist eine Kopie der DOM-Struktur, die anstatt der ursprünglich gewählten DOM-Elemente weiter verkettet werden kann. Im folgenden Code klone ich das

-Element und hänge dann diese Kopie wieder mit Hilfe der Methode
appendTo()
.an das DOM an. Im Prinzip füge ich also der Seite eine weitere


-Struktur hinzu, die exakt der entspricht, die schon vorhanden ist:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">








• List


• List


• List


• List







    Diskussion
    Die Methode zum Klonen ist sehr praktisch, wenn man DOM-Abschnitte innerhalb des DOM verschieben will. Sie bietet sich vor allem dann an, wenn Sie nicht nur die DOM-Elemente kopieren und verschieben wollen, sondern auch die Events, die damit verbunden sind. Schauen Sie sich den folgenden HTML- und jQuery-Code genau an:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">








• List


• List


• List


• List









    Wenn Sie diesen Code in einem Browser ausführen, werden damit die

• 
  -Elemente auf der Seite kopiert, die ein Click-Event besitzen, diese neu kopierten Elemente (einschließlich der Events) werden dann in das leere
  
  
  eingefügt und anschließend wird das
  
  
  -Element entfernt, das wir kopiert hatten.
      Das mag nicht so gleich in den Kopf eines neuen jQuery-Entwicklers gehen, daher wollen wir uns diese Anweisung Schritt für Schritt anschauen, um die verketteten Methoden zu erläutern:
      jQuery('ul#a li')
  = Selektiere das
  
  
  -Element mit dem
  id
  -Attribut
  a
  und selektieren dann alle
  
  • 
    -Elemente innerhalb von
    
    
    .
    .click(function(){alert('List-Item angeklickt')})
    = Hinzufügen eines Click-Events zu jedem
    
    • 
      .
      .parent()
      = Durchlaufen des DOM, indem für das selektierte Set das Element
      
      
      genutzt wird.
      .clone(true)
      = Klonen des
      
      
      -Elements mit all seinen Kind-Elementen und den Events (auch der Kind-Elemente). Das geschieht, indem der Methode
      clone()
      ein Boolescher Wert
      true
      übergeben wird.
      .find('li')
      = Nun wird innerhalb der geklonten Elemente das Set mit Elementen so geändert, dass nur die
      
      • 
        -Elemente innerhalb des
        
        
        -Elements übrig