Mit jQuery das DOM fantastisch auslösen

Gene Kelly bin ich nicht.

Versteh mich nicht falsch, ich kann tanzen. Aber es ist sicherlich nicht das Schöne, was Sie in den alten Hollywood-Musicals sehen - es sei denn, Sie sehen mich mit jQuery durch das DOM (das Document Object Model) tanzen.

Es gibt viele Fälle, in denen Sie in der Lage sein müssen, mit Elementen in Ihrem Markup zu arbeiten, die entweder Vorfahren (Eltern, Großeltern usw.) oder Nachkommen (Kinder, Enkelkinder usw.) eines von Ihnen ausgewählten HTML-Elements sind. Das Konzept ist, dass Sie sich im Stammbaum, dem DOM, von dem Glied (dem aktuellen Element), auf dem Sie stehen, auf, ab und seitwärts bewegen. Diese Bewegung wird als Durchlaufen des DOM bezeichnet.



Was malen Maler an?

jQuery bietet verschiedene Methodenkategorien, mit denen Sie das DOM mühelos und elegant durchlaufen können, um zu den Elementen zu gelangen, mit denen Sie beim Codieren Ihrer Frontend-Schnittstellen arbeiten müssen. Die jQuery-Bibliothek teilt die Bibliothek folgendermaßen auf:

In diesem Artikel werde ich mich auf die Baumdurchquerungsmethoden konzentrieren.

Anatomie eines DOM-Baums

Das DOM stellt sicher, dass alles in einer baumartigen Hierarchie angeordnet ist, sodass alle Ihre virtuellen Bewegungen von Glied zu Glied leicht zu visualisieren und auszuführen sind. Schauen Sie sich die folgende Abbildung an, um ein Beispiel für die Zweige zu sehen, die sich möglicherweise in Ihrem DOM-Baum befinden.

Die Zweige sollten Ihnen ziemlich vertraut vorkommen. Es gibt ein Div, das eine ungeordnete Liste enthält, ein anderes Div, das mehr Divs enthält, eine Tabelle und ein anderes Div, das Absätze und Bilder enthält. Beginnen wir damit, die Baumdurchlaufmethoden von jQuery so einzusetzen, dass sie sich in diesem Baum bewegen.

Auf und ab gehen wir

Ohne weiteres Markup, einschließlich IDs oder Klassen, und ohne einige andere Filtermethoden können Sie den Baum ganz einfach durchlaufen.

(HINWEIS: Alle Beispiele wurden bei getestet jsfiddle.net ).

Das Markup für die ungeordnete Liste sieht folgendermaßen aus:

Für diese Übung besteht das Ziel darin, auf einen Link in der ungeordneten Liste zu klicken und die Hintergrundfarbe aller Vorfahren zu ändern. Hier ist der jQuery-Code, um diese Aktion auszuführen:

$('a').click(function(e){ if(0 == $(this).parent().index()){ $(this).parents().css('background-color', '#CCFFCC'); }else if(1 == $(this).parent().index()){ $(this).parents().css('background-color', '#99CC99'); }else if(2 == $(this).parent().index()){ $(this).parents().css('background-color', '#669966'); }});

Da jeder Link eine bestimmte Aktion haben soll, müssen Sie bestimmen, wo er sich im Verhältnis zum Rest des Baums befindet. Jedes Ankertag ist ein direkter Nachkomme eines Listenelements, daher hat das Ankertag in diesem Fall immer den Indexwert 0. Dieser Indexwert identifiziert in diesem Fall nicht eindeutig den Link, sondern den direkten Vorfahren, den übergeordneten, des link ist Mitglied einer Gruppe von Listenelementen. Das DOM stellt sicher, dass jedes dieser Listenelemente eine eindeutige Indexidentität als Nachkommen des ungeordneten Listenelements aufweist. Sehen Sie sich das mit Anmerkungen versehene Markup an:

  • one
  • // li is index 0 of ul
  • two
  • // li is index 1 of ul
  • three
  • // li is index 2 of ul

Verwenden von $ (this) .parent (). index () bewirkt, dass das Ankertag sein übergeordnetes Element findet und dann den Indexwert des übergeordneten Elements ermittelt.

Als Nächstes möchten Sie einige CSS-Eigenschaften auf alle Vorfahren des Ankertags anwenden. Durch einfaches Angeben der Eltern() Methode, jQuery wendet die Änderung wie erforderlich an. Geh 'rüber zu jsfiddle.net/jayblanchard/8PqvJ/ und überprüfen Sie die Ergebnisse.

Sie werden zweifellos feststellen, dass die Dinge nicht unbedingt so liefen, wie Sie es erwartet hatten. Wenn Sie alle drei Links in der Reihenfolge von oben nach unten angeklickt haben, erhalten Sie das Endergebnis, wie in der nächsten Abbildung gezeigt.

Um zu verstehen, was passiert ist, müssen Sie nur alle Vorfahren des Ankertags betrachten, nämlich das Listenelement, die ungeordnete Liste, das div, den body und die HTML-Elemente. Ohne einen Selektor für die zu definieren Eltern( ) Methode bekommen Sie alle Eltern. Durch Klicken auf das nächste indizierte Element wird nur die Hintergrundfarbe der übergeordneten Elemente dieses Ankertags geändert. Dieses Verhalten wird fortgesetzt, wenn auf die einzelnen Links geklickt wird. Da sich die anderen Ankertags und Listenelemente nicht in der übergeordneten Kette befinden, werden sie nicht geändert.

Sie können den Aufstieg auf den Ahnenbaum mit jQuery begrenzen parentUntil () Methode. Ändern Sie den jQuery-Code aus dem vorherigen Beispiel in den folgenden:

$('a').click(function(e){ if(0 == $(this).parent().index()){ $(this).parentsUntil('ul').css('background-color', '#CCFFCC'); }else if(1 == $(this).parent().index()){ $(this).parentsUntil('ul').css('background-color', '#99CC99'); }else if(2 == $(this).parent().index()){ $(this).parentsUntil('ul').css('background-color', '#669966'); }});

Das CSS wird nur auf das direkte übergeordnete Element (ja - ich weiß, es gibt einen viel prägnanteren Weg, dies zu tun!) Des angeklickten Elements angewendet. Sie können dies hier in Aktion sehen: jsfiddle.net/jayblanchard/uTakJ/ .

Eine andere Möglichkeit, einen bestimmten Vorfahren zu finden, ist die Verwendung von jQuery am nächsten () Methode. Das am nächsten () Die Methode beginnt am aktuell ausgewählten Element und arbeitet sich die Ahnenkette hinauf, bis das erste Element gefunden wird, das dem Selektor entspricht.

$('a').click(function(e){ e.preventDefault(); $(this).closest('li').css('background-color', '#999966');});

Verwenden Sie weiterhin die zuvor erstellte ungeordnete Liste, die am nächsten () Die hier verwendete Methode beginnt mit dem Ankertag und durchsucht den Ahnenbaum, bis ein Listenelement gefunden wird.

Was ist mit Nachkommen? Mit den Traversal-Methoden von jQuery sind sie genauso einfach zu erreichen. Das folgende Markup wird auf die Tabelle aus unserem Baum angewendet:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Wenn Sie alle untergeordneten Elemente der Tabelle möchten, werden die Zeilen ( tr ) Um einen Stil auf sie anzuwenden, wählen Sie sie wie folgt aus:

Low Light Point und Kamera aufnehmen
$('table').children().css('background-color', '#FFFF00');

Die Kinder sind immer eine Ebene tiefer als das übergeordnete Element, die unmittelbaren Kinder. Wenn Sie später mit Nachkommen arbeiten möchten, sollten Sie die verwenden finden() Methode. Wenn Sie beispielsweise die Hintergrundfarbe der letzten Zellen in jeder Zeile ändern möchten, können Sie Folgendes schreiben:

$('tr').find('td:last').css('background-color', '#FFFF00');

Das finden() Methode wurde verwendet, um alle Tabellenzellen und den jQuery-Filter zu lokalisieren :letzte wurde verwendet, um sicherzustellen, dass nur auf die letzte Zelle in der Zeile das CSS angewendet wurde. Ändern des Selektors aus der Tabellenzeile ( tr ) to table ergibt ein völlig anderes Ergebnis als in der nächsten Abbildung dargestellt:

Nachdem Sie nun Vorfahren- und Nachkommenelemente gefunden haben, konzentrieren wir uns darauf, diese Elemente nebeneinander zu finden.

Brüder und Schwestern

jQuery stellt einige Methoden für die Arbeit mit den Brüdern und Schwestern von DOM-Elementen vor. Die am häufigsten verwendete dieser Methoden ist die Geschwister() Methode. Mit dieser Methode werden alle Geschwister eines ausgewählten Elements identifiziert. In diesem Beispiel habe ich die ungeordnete Liste erweitert und die folgende jQuery verwendet, um die Hintergrundfarbe der betreffenden Geschwister zu ändern:

$('a').click(function(e){ e.preventDefault(); $(this).parent().siblings().css('background-color', '#666699');});

Das Ankertag hat keine Geschwister, das übergeordnete Element, das Listenelement, jedoch. Wenn Sie auf den Link mit dem Wort 'zwei' klicken, erhalten Sie das folgende Ergebnis:

Bei jedem der Geschwister des Listenelements wurde das CSS geändert.

Verwendung des Bleistiftwerkzeugs im Illustrator

Wenn Sie mit den Geschwistern eines Elements arbeiten, können Sie sich diese genauso vorstellen wie jede Gruppe von Brüdern und Schwestern. Einige Kinder (Elemente) sind älter als andere.

Wenn Sie Geschwister auswählen möchten, die vor dem aktuellen Kind, den älteren Kindern, stehen, können Sie das verwenden prev () , prevAll () und prevUntil () jQuery-Methoden. Wie Sie sich vorstellen können, ist die prev () Methode wählt das Geschwister aus, das dem ausgewählten Kind unmittelbar vorausgeht. Das prevAll () Methode umfasst alle älteren Kinder. Sie haben auch die Möglichkeit, eine Gruppe älterer Kinder bis zu einem bestimmten Punkt auszuwählen (genau wie Sie es getan haben parentUntil () ) mit prevUntil () .

Geschwister, die jünger als das ausgewählte untergeordnete Element sind, können mit dem definiert werden Nächster() , nextAll () und nextUntil () .

Weitere Informationen zu den Traversal-Methoden von jQuery

Ich empfehle Ihnen, sich die anderen Traversal-Methoden anzusehen, einschließlich einiger Filter, die von der jQuery-Bibliothek sehr nützlich sind. Die Dokumentation finden Sie unter api.jquery.com/category/traversing/ .