jQuery.find() – Auffinden von Elementen im DOM

Mit jQuery.find() können Sie gezielt nach be­stimm­ten HTML-Tags, Klassen oder IDs suchen, ohne auf­wen­di­ge manuelle Ite­ra­tio­nen durch­füh­ren zu müssen.

Was ist die jQuery.find()-Methode?

Indem Sie jQuery.find() auf ein be­stimm­tes jQuery-Objekt anwenden, können Sie Elemente innerhalb dieses Objekts lo­ka­li­sie­ren. Die Suche erfolgt rekursiv. Das bedeutet, dass nicht nur die direkten Kinder von jQuery.find(parent) durch­sucht werden, sondern auch alle ver­schach­tel­ten Elemente im DOM-Baum. Das Ergebnis ist ein neues jQuery-Objekt, das alle ge­fun­de­nen Elemente enthält. Dieses kann dann ma­ni­pu­liert oder als Grundlage für weitere Ope­ra­tio­nen verwendet werden. Sie können dem Objekt zum Beispiel eine Klasse mit jQuery.addClass() hin­zu­fü­gen oder andere Elemente durch jQuery.append() anhängen. Des Weiteren er­mög­licht jQuery in WordPress auf einfache Weise Objekte in Ihrem CMS zu finden.

Wie sieht die Syntax von jQuery.find() aus?

Die jQuery.find()-Methode hat folgenden Aufbau:

$(selector).find(filter)

• filter: ist optional und dient zur weiteren Filterung der ge­fun­de­nen Elemente anhand zu­sätz­li­cher Se­lek­to­ren in jQuery, zum Beispiel jQuery.find(class) oder jQuery.find(id)

Wenn Sie mehr über Se­lek­to­ren, deren Schreib­wei­sen und Funk­tio­nen lernen möchten, können Sie einen Blick in unser jQuery-Tutorial werfen.

Beispiele für die Anwendung von jQuery.find()

Die Vielzahl an Se­lek­to­ren, die Sie als Filter für die jQuery.find()-Methode verwenden können, wollen wir Ihnen an folgenden Bei­spie­len de­mons­trie­ren:

// Suche nach allen <a>-Elementen innerhalb eines <div>-Elements mit der Klasse "container"
$('.container').find('a');
// Suche nach <li>-Elementen innerhalb eines <ul>-Elements mit der ID "myList"
$('#myList').find('li');
// Suche nach allen <input>-Elementen innerhalb eines <form>-Elements und Filtern nach dem Typ "text"
$('form').find('input[type="text"]');

Sie können auch weitere Funk­tio­nen bequem mit jQuery.find() ver­knüp­fen:

$("div#container").find("button").addClass("selected");

Mithilfe von jQuery.find(element) lo­ka­li­sie­ren wir in diesem Beispiel alle Buttons im <div>-Element mit der ID „container“ und vergeben diesen die Klasse „selected“.