Javascript-Element Finden

| | |

Die jQuery-Methode find() mag bekannt klingen, aber verwechseln Sie sie nicht mit der JavaScript-Methode find()! Beide "find‚" Dinge, aber was sie zuruckgeben, kann ganz anders sein. In JavaScript kann die Methode find() nur fur ein Array aufgerufen werden.

Sie benötigt eine Callback-Funktion, eine Funktion, die als Argument an eine Methode ubergeben wird , wird später aufgerufen. Es findet das erste Element, das die Anforderungen der Callback-Funktion erfullt, und gibt es zuruck.

Die jQuery-Methode find() ist ganz anders. Wie alle jQuery-Methoden wird sie von einem Selektor aufgerufen. Es sucht innerhalb dieses Selektors und bearbeitet nur die untergeordneten Elemente dieses Selektors. Dieses hohe Manipulationsniveau ist nutzlich, wenn Sie einige Elemente ändern möchten und andere nicht, die im selben Elternelement enthalten sind.

Verwenden von jQuery find()

Wir kennen jetzt jQuery find() wird verwendet, um alle untergeordneten Elemente eines bestimmten Selektors auszuwählen. Sehen Sie sich einen Beispielcode an, um zu sehen, wie jQuery find() verwendet wird.

Lass uns einfach anfangen und in weiteren Abschnitten etwas komplexer werden. Wir können ein Element manipulieren, nachdem die Seite geladen wurde, um zu veranschaulichen, wie find() funktioniert. Wie wäre es, wenn wir die Farbe einiger Wörter im Kontext eines Absatzes ändern, sobald die Seite geladen wird? Wir beginnen hier:

Jedes andere Wort wird gleich bleiben.

Schauen Sie sich diesen Code an und Sie werden feststellen, dass im

-Element sind wenige Elemente. Einer der elements ist ein untergeordnetes Element der

Element. Das andere ist ein Kind des

IR3bnpJdRzIwsq1CzCQeT4Lf2F4YaVtdHjwqHecFlqkjNYR Oi9DIefQs IX6Kf1Bh0JQQNYqxQG7okIP98RPQ PYHTDhu AOabwfhnwB4rdWRmoMw5WgSDtLIKD5ZU9bX4q7VkI

Unser HTML wird gerendert. Wir werden jetzt die Farben des Textes ändern, um find() in Aktion zu veranschaulichen. Dies ist ein großartiger Anfängerschritt, da wir nur um ein CSS-Attribut zu ändern, um dies zu erreichen. Während wir das

-Element als unseren Selektor an find() ubergeben, können wir jQuerys css()-Methode verwenden, um die Farbänderungen rendern:

Bei der ersten Verwendung von find() wählen wir alle

Elemente. Wir verwenden find(), um alle Elemente, die die Kinder von

sind. In diesem Beispiel ist es nur das Wort blau. Anschließend verwenden wir die Methode css(), um die Farbe in Blau zu ändern.

Auf zur zweiten Nutzung von find(). Diesmal wählen wir das ist.

Auch hier handelt es sich nur um das Wort grun. Wie in der ersten Zeile verwenden wir die Methode css(), um die Farbe in Grun zu ändern.

Lassen Sie es ausfuhren und sehen, was passiert!

NmmVK1C X Z30uO5sa15iVH9aCEO ASkwA4cuqwxOagZqMkO8QpJd AlJeZH2NXXSALKH8lWknoNiwXquCqxMuztLiG CL0FzyoN60rr OR3aktZVCcmRgyHPk7Fd7hsjGON74Pi

Beachten Sie, dass sowohl die Wörter blau als auch grun in ein span-Element ohne zugewiesene Klasse oder ID eingeschlossen wurden. Wir konnten diese Wörter immer noch isolieren und ihre Farbe ändern. Wie Sie vielleicht erraten haben, liegt dies daran, dass die ubergeordneten Elemente der sind unterschiedlich.

Die

ist das Elternelement von des Wortes blau. Die

Dies geschah, weil find() die untergeordneten Elemente der als Selektor verwendeten Elemente lokalisiert. Lassen Sie uns etwas komplexer machen und sehen Sie sich ein Beispiel fur eine Aufgabenliste an.

jQuery find() in einer Liste

In diesem Beispiel haben wir eine To-Do-Liste. Wir haben heute Dinge zu erledigen, aber wir mussen auch Dinge im Laden kaufen, um tun sie. Sobald wir diese Artikel gekauft haben, können wir sie von der Liste streichen und mit unserem Tag fortfahren! Hier ist unsere Liste:

Hier haben wir unsere Liste. Wir haben die

  • ;-Elemente von "Gehen Sie in den Laden" "Bringen Sie den Mull raus" und "Waschen Sie das Geschirr‚" als Kinder des