How to Use the find () method in Jquery

The find () method is widely used for Traversing nodes. I will introduce some common examples of the find () method to help you.

First look at an example: Search for the descendant span element in all paragraphs and set its color to red. The Code is as follows:

The Code is as follows:	Copy code
<P> <span> Hello </span>, how are you? </P> <P> Me? I'm <span> good </span>. </p> <Script> $ ("P"). find ("span" ).css ('color', 'red '); </Script>

The effect is as follows:

The Code is as follows:	Copy code
Hello, how are you? Me? I'm good.

Definition and usage
The find () method gets the descendant of each element in the current element set, and filters by selector, jQuery object, or element.

Syntax
. Find (selector)

The selector string value that contains the selector expression used to match the current element set.

Detailed description
If a jQuery object indicating a DOM element set is given, the. find () method allows us to search for the descendants of these elements in the DOM tree and construct a new jQuery object by matching the elements .. The find () and. children () methods are similar. The difference is that the latter only traverses a single level down the DOM tree.

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

Consider the following simple nested list:

The Code is as follows:	Copy code
<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 List II to find the list items:

The Code is as follows:	Copy code
Certificate ('li.item-ii'0000.find('li'0000.css ('background-color', 'red ');

The result of this survey is that projects A, B, 1, 2, 3, and C are set with A red background. Even if Project II matches the selector expression, it is not included in the result; it only matches future generations.
Unlike other tree traversal methods, selector expressions are required for. find. If we need to retrieve all descendant elements, we can pass the wildcard selector '*'.

The selector context is composed. the find () method is implemented. Therefore, $ ('Li. item-II '). find ('lil') is equivalent to $ ('lil', 'Li. item-II ').

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

The Code is as follows:	Copy code
Var $ allListElements = $ ('lil ');

Then pass the jQuery object to the find method:

The Code is as follows:	Copy code
$ ('Li. item-II'). find ($ allListElements );

The above code returns a jQuery set containing the list elements of List II descendants.

Similarly, an element can be passed:

The Code is as follows:	Copy code
Var item1 = $ ('Li. item-1') [0]; $ ('Li. item-II'). find (item1 example .css ('background-color', 'red ');

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

You can see the following example at a Glance:

HTML code:

The Code is as follows:	Copy code
<Div class = "benben"> <P> Hello, World! </P> <P> Hello, World Again! </P> <P class = "test"> Test1 </p> </Div> <Div class = "test"> <P> Test2 </p> </Div>

JQuery code:

The Code is as follows:	Copy code
<Script type = "text/javascript"> // Using find () Var $ find = $ ("div"). find (". test "); Alert(appsfind.html (); // display "Test1" // Using test () Var $ filter = $ ("div"). filter (". test "); Alert($filter.html (); // display "Test2" </Script>

The find () or filter () method is often used in many cases. The following code uses the find () method to find child elements that meet the conditions in the specified element.

The Code is as follows:	Copy code
<Script type = "text/javascript"> $ (Document). ready (function (){ // Mouse hover $ ("Ul. test> li"). hover (function (){ $ (This). find ("a: first" example .css ({ "Background": "white ", "Position": "relative" }); }, // Mouse out Function (){ $ (This). find ("a: first" example .css ({ "Background ":"", "Position ":"" }); }); }); </Script>