jQuery filters to find his father parent, closest, parents, parentUntil

Author: Old http://senir.blog.163.com silent (please indicate the source)

These filters are looking for the father, but different specific usage
.parent (expr) - to find his father, only a check, authentic father, the expression should rarely use
.parents (expr) - plus the plural, it become more of a father, from father started the investigation, has been up investigation, found the root element, then expr expression to filter
.closest (expr) - this is similar with the parents, but this is the beginning of the investigation from the current element, and check to comply with an expression stopped
.parentsUntil (expr) - similar with the parents, the difference is not found in the root element, encountered expr match stopped, but does not include expr match to that element

Test Case:

< Body > 
< div the above mentioned id = "main" > 
    < div the above mentioned id = "Hot" class = "rightBar" > 
        < h2 > Hot Offers </ h2 > 
        < ul > 
            < li > 
                < ul > 
                    < li class = "the p-" > olive oil's melting </ Li > 
                    < Li > Pampers diapers </ Li > 
                    < Li ID = "H"> Organic rice </ Li> 
                    < Li > Miao Jie garbage bags </ li > 
                    < li > Excellent Konami tea </ li > 
                    < li > kiss jelly </ li > 
                </ ul > 
            </ li > 
            < li > 
                < ul > 
                    < li > Head & Shoulders shampoo </ li > 
                    < li > six God toilet water </ li > 
                    < li > Safeguard soap </ li >
                    <> Heart of India paper towels </ li > 
                    < li > wow ha ha mineral water </ li > 
                    < li > Wong Lo Kat </ li > 
                </ ul > 
            </ li > 
        </ ul > 
    </ div > 
</ div > 
</ body >

<Script type = "text / JavaScript" Language = "JavaScript">
 // here jQuery code 
</ script>

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

$("#h").parent().css("background-color","#ccc");

effect:

The above code is equivalent to

$("#h").parent("ul").css("background-color","#ccc");

If you are looking for grandparents

$("#h").parent("li").css("background-color","#ccc");

Will fail

Test 2: Find the ancestor element id = "h" is in line with the elements ul labels, set the background color to gray

$("#h").parents("ul").css("background-color","#ccc");

effect:

parents not only to find his father, also found a great-grandfather ^ _ ^, but the closest it will not, because to find the closest stop to find his father

Test 3: Find the ancestor elements with closest id = "h" is in line with ul element tag, and set the background color to gray

$("#h").closest("ul").css("background-color","#ccc");

effect:

Test 4: Test closest is to start looking from the current element, and parents are beginning to find their parents from elements found id = "h" fathers element is the element 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 id = parent element "h" in an element ul tag, and set the background color is gray, the purpose of testing parentsUntil find the expr stops, but does not contain the elements in line with expr, the comparison test 1

$("#h").parentsUntil("ul").css("background-color","#ccc");

effect:

Did not come out, in fact, has been found, only to find to exclude ul, do not believe try to look for grandparents li

$("#h").parentsUntil("li").css("background-color","#ccc");

effect:

Out of it, in fact, this is grayed ul, li ruled out because the

Test 6: The difference between the test parents and parentsUntil, parentsUntil found stopped, parents will always look up to find the father element id = "h" is an element of the li tag, and set the background color is gray
this and see Test 2 5 the first test will be able to see it.

 

Author: Old http://senir.blog.163.com silent (please indicate the source)

Reproduced in: https: //www.cnblogs.com/zhangchenliang/archive/2013/06/04/3118109.html