Author: Old Mo http://senir.blog.163.com (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
$("#h").parent().css("background-color","#ccc");
Effect:
The above code is equivalent
$("#h").parent("ul").css("background-color","#ccc");
If you are looking for grandfathers
$("#h").parent("li").css("background-color","#ccc");
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.
$("#h").parents("ul").css("background-color","#ccc");
Effect:
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.
$("#h").closest("ul").css("background-color","#ccc");
Effect:
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
$("#h").parents("li").css("background-color","#ccc");
Effect:
$("#h").closest("li").css("background-color","#ccc");
Effect:
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
$("#h").parentsUntil("ul").css("background-color","#ccc");
Effect:
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.
$("#h").parentsUntil("li").css("background-color","#ccc");
Effect:
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 http://senir.blog.163.com (reproduced please indicate the source)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
