JQuery traversal-Find () method

JQuery Traversal Reference Manual

Instance

Search for the descendant span element in all paragraphs and set its color to red:

$ ("P") .find("span") . CSS (' Color ', ' red ');

Try it yourself.

Definition and usage

The find () method gets the descendants of each element in the current element collection, filtered by a selector, JQuery object, or element.

Grammar

. Find (selector)

Parameters	Description
Selector	A string value that contains the selector expression that matches the current collection of elements.

Detailed description

Given a JQuery object that represents a collection of DOM elements, the. Find () method allows us to search for descendants of these elements in the DOM tree and constructs a new jquery object with matching elements: the Find () is similar to the. Children () method, but the latter only follows the The DOM tree traverses a single level down.

The first obvious feature of the. Find () method is that its accepted selector expression is the same as the type of the expression we passed to the $ () function. The elements are filtered by testing whether the elements match the expression.

Consider this simple nested list:

<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'll start by listing II to find the list items:

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

Try it yourself.

As a result of this survey, items A, B, 1, 2, 3, and C were all set to a red background. Even if item II matches the selector expression, it will not be included in the result, and only the descendants will be matched.

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

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

For jquery 1.6, we can also use a given jquery collection or element to filter. or the nested list above, we first write this:

var $allListElements = $ (' li ');

This JQuery object is then passed to the Find method:

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

Try it yourself.

The above code returns a JQuery collection that contains the list elements that belong to the list II descendants.

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 item 1 is set to a red background.

JQuery Traversal Reference Manual

Through the above explanations, we can summarize the following:
The 1:children and find methods are used to obtain the sub-elements of element, neither of which will return text node, just like most jquery methods.
The 2:children method obtains only the child element of a subordinate element, namely: immediate children.
The 3:find method obtains all subordinate elements, namely: descendants of these elements in the DOM tree
The parameter selector of the 4:children method is optional (optionally), which is used to filter the child elements, but the parameter selector method of the Find method is required.
The 5:find method can in fact be implemented by using JQuery (selector, context): English says: Selector context is implemented with the. Find () method; Therefore, $ (' li.item-ii '). Find (' Li ') is equivalent to $ (' Li ', ' Li.item-ii ').

For example, there are the following HTML elements:

Use: $ (' Ul.level-2 '). Children (). CSS (' border ', ' 1px solid green '); The effect is:

Use $ (' Ul.level-2 '). Find (' Li '). CSS (' border ', ' 1px solid green '); The effect is:

JQuery traversal-Find () method