jQuery-Through - find() -Methode

jQuery Traversing Reference Manual

Beispiel

Suchen Sie alle Nachkommen span-Elemente in den Absätzen und setzen Sie deren Farbe auf rot:

$("p").find("span").css('color','red');

Try it yourself

Definition und Verwendung

Die find() -Methode ermittelt die Nachkommen jedes Elements in der aktuellen Element集合 durch Auswahlkriterien, jQuery-Objekte oder Elemente.

Syntax

.find(selector)
Parameter Beschreibung
selector Zeichenkette, die den Selector-Ausdruck enthält, der für die Übereinstimmung mit der aktuellen Element集合 bestimmt wird.

Detaillierte Erklärung

Wenn ein jQuery-Objekt gegeben ist, das eine Sammlung von DOM-Elementen darstellt, ermöglicht die .find() -Methode, in der DOM-Baum nach diesen Elementen zu suchen und einen neuen jQuery-Objekt mit den übereinstimmenden Elementen zu konstruieren. .find() ähnelt der .children() -Methode, der Unterschied ist, dass die letztere nur eine Ebene im DOM-Baum hinuntergeht.

.find() -Methode hat das erste markante Merkmal, dass sie den Selector-Ausdruck annimmt, der dem Typ entspricht, den wir an die Funktion $() übergeben. Es wird durch das Testen, ob die Elemente dem Ausdruck entsprechen, die Elemente gefiltert.

Bitte überlegen Sie sich die folgende einfache verschachtelte Liste:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

We will start from the list II to find the list items within it:

$('li.item-ii').find('li').css('background-color', 'red');

Try it yourself

The result of this survey is that projects A, B, 1, 2, 3, and C have all been set to a red background. Even if project II matches the selector expression, it will not be included in the result; only descendants will be matched.

Unlike other tree traversal methods, a selector expression is a required parameter for .find(). If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.

The selector context is implemented by the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii').

For jQuery 1.6, we can also use the given jQuery collection or element for filtering. For the nested list above, we first write as follows:

var $allListElements = $('li');

Then pass this jQuery object to the find method:

$('li.item-ii').find( $allListElements );

Try it yourself

The above code returns a jQuery collection containing list elements that are descendants of the list II.

Similarly, you can also pass an element:

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

Try it yourself

The result of this call is that project 1 has been set to a red background.

jQuery Traversing Reference Manual