Detailed explanation of jQuery filter children() case (picture and text)

Detailed explanation of jQuery filter children() case (picture and text)_jquery

WBOY

Release： 2016-05-16 17:41:55

Original

1158 people have browsed it

jQuery’s selection includes two types, one is the selector and the other is the filter. Filters are used to further select jQuery objects selected by the selector.

children() is a filter. As the name suggests, it filters children and filters those children who meet the conditions.

The complete format is as follows:

Copy code The code is as follows:

.children(expr )

where children is the name of the filter, expr is the expression, all expressions in the selector can be used here, such as by tag name "div", by class name ".class" ", by serial number ":first" and so on. If the expression is empty, all children will be returned, and the returned result will still be a jQuery object. For example:

Copy code The code is as follows:

Popular recommendations

Rongshi Olive oil

Pampers Diapers

Organic Rice

Miaojie Trash Bag< /li>
Youlemei Milk Tea

Kiss Jelly

Copy code The code is as follows:

Requirement 1: Change the font color of all div children to red

Copy code The code is as follows:

$("div").children().css("color","red");//all The text has turned red

Requirement 2: Change the font color of h2 tags in the children of all divs to red

Copy code The code is as follows :

$("div").children("h2").css("color","red");//All h2 title text turns red

Requirement 3: Change the font color of the li tag in the children of all divs to red

Copy the code The code is as follows:

$("div").children("li").css("color","red");//Failed!

Why didn’t it succeed? Because children can only find children, not grandchildren, and the children of div are h2 and ul, so li cannot be found;

Then if you want to find li through children, you have to first select li's father ul

Copy the code The code is as follows:

$("div ul").children("li").css("color","red");//All li text turns red

$("div ul") is a cascading selector, which means to select the ul below the div. This will not be explained in detail here.

Requirement 4: Change the font color of the second child of ul to red

Copy code The code is as follows:

$("div ul").children(":eq(1)").css("color","red");//Guess which one you like The second line of "Liu Shen Floral Water" will turn red

If you want the second child to turn red, why is eq(1)? Because the sequence number starts from 0, the first child's sequence number is 0, so the second child's sequence number is 1.

A closer look shows that only the second line of the "Guess You Like" module has changed, but the second line of "Popular Recommendations" has not changed. Why? Because the children filtered out by the children filter are sorted together, the second line of "Popular Recommendations" becomes Old 7. If you want to make it red, you can write:

Copy code The code is as follows:

$("div ul").children(":eq(1),:eq(7)") .css("color","red");//Guess the second line you like, the second line of popular recommendations will turn red 

Both lines will turn red]

To summarize: children is a filter that finds the children of the current jQuery object. expr in children(expr) is an expression. After expr is added, only the children who match expr will stay. No Those that match will be killed. children can only find children. If you want to find grandchildren and great-grandchildren, you have to use the find filter.

Detailed explanation of jQuery filter children() case (picture and text)_jquery

You may also like

Popular recommendations