Find Father parent, closest, parents, parentuntil in jquery Filter

Source: Internet
Author: User

Author: Old Mo (reproduced please indicate the source)

These filters are for the father, but they are used differently.
. Parent (expr)-find the father, only check level 1, authentic father, the expression should be rarely used
. Parents (expr)-after adding a plural number, it becomes multiple fathers. From the father, you can check the root element and filter it through the expr expression.
. Closest (expr)-This is similar to parents, but the query starts from the current element and stops when it finds that the expression matches.
. Parentsuntil (expr)-similar to parents, the difference is that the root element is not found, and the expr match is stopped, excluding the expr matched element.

Test cases:

<Body> <Div id = "Main"> <Div id = "hot" class = "rightbar"> <H2> popular recommendations </H2> <ul> <li> <ul> <li class = "p"> rongshi olive oil </LI> <li> Pampers diapers </LI> <li id = "H"> organic rice </LI> <LI> miaojie garbage bags </LI> <li> youlemei milk tea </LI> <li> kiss jelly </LI> </ul> </LI> <li> <ul> <li> haifei silk shampoo </LI> <li> Liushen toilet water </LI> <li> shufujia soap </LI> <li> printed paper towel </LI> <li> wow haha mineral water </LI> <li> Wang laoji </LI> </ul> </div> </body>
<SCRIPT type = "text/JavaScript" Language = "JavaScript"> // jquery Code </SCRIPT>

Test 1: Find the parent element of the element id = "h" and set the background color to gray



The above code is equivalent


If you are looking for grandfathers


Will fail

Test 2: Find the element that matches the UL label in the id = "H" ancestor element and set the background color to Gray.



Parents not only found the father, but also found the grandfather ^ _ ^, but closest won't, Because closest stops searching for the father.

Test 3: Use closest to find the element of the ancestor whose id = "H" matches the UL tag, and set the background color to Gray.



Test 4: Test closest to search for the current element, while parents to search for the parent element from the parent element. Find the parent element of ID = "H" as the Li tag, and set the background color to gray





Test 5: Find the UL Tag Element in the parent element of ID = "h" and set the background color to gray. The purpose is to test the expr found by parentsuntil and stop, but does not contain the expr element. Comparison Test 1



I did not find it, but I just excludes the ul I found. I don't believe I can try to find my grandfather's Li.



Come out. Actually, UL is the gray this time, because Li is excluded.

Test 6: test the difference between parents and parentsuntil. If parentsuntil is found, it stops. Parents keeps searching for the parent element whose id = "H" is the Li tag, and set the background color to gray
This can be seen from the first in Test 2 and Test 5.


Author: Old Mo (reproduced please indicate the source)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.