Home > Developer > Web Develop
jquery's parent (), parents (), Parentsuntil (), closest () are all looking up for the parent element, with different usage
Parent (): Gets a collection of elements that contain a unique parent element for all matching elements.
Parents (): Walks up the DOM tree until the root element (
Closest (): Walk up the DOM tree until you find a match for the selector you have applied. Returns 0 or one element
Parentsuntil (): Finds all the parent elements of the current element until the matching element is encountered, but does not include the element to which the selector matches. Similar to parents, the difference is that the root element is not found, the match is stopped, and the matching element is not included.
Note: These four selectors return an array and are jquery objects, but the elements in the array are not jquery objects and need to be encapsulated again to use the API provided by jquery
-----------------------------------------------------------------Test------------------------------------------------------ -----------
Base code:
Note: The following tests are tested with $ (). CSS (), and CSS () is a function of jquery.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title></title>6 <Scripttype= "Text/javascript"src= "Js/jquery-1.7.2.js" ></Script>7 <Script>8 $(function(){9 //jqueryTen }); One functionChangeColor (a) { A //changecolor - } - </Script> the </Head> - <Body> - <ulclass= "Level-1 yes"> - <Liclass= "Item-i">I</Li> + <Liclass= "Item-ii">II - <ulclass= "Level-2 yes"> + <Liclass= "Item-a">A</Li> A <Liclass= "Item-b">B at <ulclass= "Level-3"> - <Liclass= "Item-1">1</Li> - <Liclass= "Item-2">2</Li> - <Liclass= "Item-3">3</Li> - <Liclass= "Item-3"><ahref= "javascript:;"onclick= "ChangeColor (this);"> Change Color</a></Li> - </ul> in </Li> - <Liclass= "Item-c">C</Li> to </ul> + </Li> - <Liclass= "ITEM-III">Iii</Li> the </ul> * </Body> $ </HTML>
：
I. Parent ()
1. The expression is empty and the previous level element (unique parent) is selected. <ul class= "Level-3" >...</ul>
$ ("Li.item-1"). Parent (). CSS ("Border", "3px solid Blue");2. Use an expression selection (direct parent): the same as the effect.
$ ("Li.item-1"). Parent (". level-3"). CSS ("Border", "3px solid Blue");3. Use an expression selection (not a direct parent): no effect
$ ("Li.item-1"). Parent (". Level-1"). CSS ("Border", "3px solid Blue");4. Select multiple: Select the direct parent of all Li
$ ("Li"). Parent (). CSS ("Border", "3px solid Blue");5. Select multiple according to the expression: Select the direct parent of Li and class= "Level-2", this can actually be considered as the parent of all Li, and then filter out the parent of class= '. Level-2 '.
$ ("Li"). Parent (". Level-2"). CSS ("Border", "3px solid Blue");6. Change the color: <li class= "Item-b" ></li> border into red, from the <a> start to look up, only a first level to find the element to match.
$ ("a"). Parent (). Parent (). Parent (). CSS ("Border", "3px solid Red");7. Click Change color: Set <li class= "Item-b" ></li> the border is red. The effect is the same.
function ChangeColor (a) {$ (a). Parent (). Parent (). Parent () . CSS ("Border", "3px solid Red");}8. Set parent () to return the border of the first element of the array to red:
Select the parent label for Li ul: returns 3 elements here
$ ("Li"). Parent ("UL"). CSS ("Border", "3px solid Blue");The code is as follows: The color is the same, the effect is the same. The RETS[0].CSS () is used.
$ ("Li"). Parent ("UL"). CSS ("Border", "3px solid Blue"), var rets = $ ("Li"). Parent ("UL"); Rets[0].css ("Border", "3px solid Red ");Color change: The first element is wrapped here, compared to the above: the element of the array returned by parent () is not a jquery object.
$ ("Li"). Parent ("UL"). CSS ("Border", "3px solid Blue"), var rets = $ ("Li"). Parent ("UL"); $ (rets[0]). CSS ("Border", "3px Solid red ");Second, parents ()
1. No expression: Walk up the DOM tree until the root element (
$ ("li.item-1"). Parents (). CSS ("Border", "3px solid Blue");2. Expression: Select the parent of class= "yes". Note here, in effect, that each ancestor element is added to a temporary collection first, and then the collection is filtered based on an expression. Parents () is equivalent to skip selection.
$ ("li.item-1"). Parents (". Yes"). CSS ("Border", "3px solid Blue");3. Click Change color: Set <li class= "item-b" ></li> border color is red, you can directly select the element to operate.
function ChangeColor (a) { $ (a). Parents (". Item-b"). CSS ("Border", "3px solid Red");}4. Set the first element border in the array to red:
Selected element: The returned array has three elements.
$ ("li.item-1"). Parents ("ul"). CSS ("Border", "3px solid Blue");Sets the first element border in the array to red: Using Rets[0].css (), the effect is the same without any change.
$ ("li.item-1"). Parents ("ul"). CSS ("Border", "3px solid Blue"), var rets = $ ("li.item-1"). Parents ("ul"); Rets[0].css (" Border "," 3px solid Red ");
Sets the first element border in the array to red: After wrapping in action: $ (Rets[0]). CSS (), color change.
The comparison with the above illustrates: parents () is not a jquery object in the returned array.
$ ("li.item-1"). Parents ("ul"). CSS ("Border", "3px solid Blue"), var rets = $ ("li.item-1"). Parents ("UL"); $ (rets[0]). CSS ( "Border", "3px solid Red");Third, Parentsuntil ()
1. No expression: Because there is no expression, the effect is as parents () without an expression, walking up the DOM tree until the document's root element (
$ ("Li.item-1"). Parentsuntil (). CSS ("Border", "3px solid Blue");2. Expression:
Hierarchical relationship: <li class= "Item-1" >--<ul class= "level-3" >--<li class= "Item-b" >--<ul class= "Level-2 yes" &G T
Here from item-1 to look up level-2, you can see, Level-2 is not selected, is selected Item-1 's parent level-3 and Item-b.
So, Parentsuntil () finds all the parent elements of the current element until it encounters the matching element, but does not include the element to which the selector matches. Similar to parents, the difference is that the root element is not found, the match is stopped, and the matching element is not included.
So, if you want to use Parentsuntil () to directly find an element is not possible, you can use parents ().
Note here: Parentsuntil () returns an array, not a single object. Parentsuntil returns an array that does not include exactly the object that satisfies the condition of an expression. Feeling these two points is easy to misunderstand.
$ ("Li.item-1"). Parentsuntil (". Level-2"). CSS ("Border", "3px solid Blue");3. Expression: It can be seen here that all the parent elements under LEVEL-2 (that is, Level-3,item-b) are selected, and then filtered out level-3
$ ("Li.item-1"). Parentsuntil (". Level-2", ". level-3"). CSS ("Border", "3px solid Blue");4. Click to change the color: The Item-b of A's parent's border is changed, but not the item-b itself.
function ChangeColor (a) { $ (a). Parentsuntil (". Item-b"). CSS ("Border", "3px solid Red");}6. Set the first element border in the array to red:
Select element: The returned array has 4 elements.
Note: If this is the case here, select $ ("Li.item-1"). Parentsuntil ("ul"), no element is selected. This should be different from parents ().
$ ("Li.item-1"). Parentsuntil ("Ul.level-1"). CSS ("Border", "3px solid Blue");Change the border color of the first element: Parents[0 is used here]. Same effect, no change!!
$ ("Li.item-1"). Parentsuntil ("Ul.level-1"). CSS ("Border", "3px solid Blue"), var parents = $ ("li.item-1"). Parentsuntil ( "Ul.level-1");p arents[0].css ("Border", "3px solid Red");The effect of wrapping the elements in an array: $ (parents[0]). CSS ().
In contrast to the above, it is stated that the elements in the array returned by Parentsuntil () are not jquery objects.
$ ("Li.item-1"). Parentsuntil ("Ul.level-1"). CSS ("Border", "3px solid Blue"), var parents = $ ("li.item-1"). Parentsuntil ( "Ul.level-1"); $ (parents[0]). CSS ("Border", "3px solid Red");Iv. closest ()
1. No expression: No expression is not selected for any element. Because closest () is starting from the current element along the DOM tree, getting the first ancestor element of the matching expression, returning 0 or one element.
$ ("Li.item-1"). Closest (). CSS ("Border", "3px solid Blue");2. Expression: Find <ul class= "Level-2 yes" >. I think this is the function we will use. Similar to parents (), but parents returns an array. The difference between attention and parents
$ ("Li.item-1"). Closest ("Ul.level-2"). CSS ("Border", "3px solid Blue");Summary: Generally speaking with closest () and parents () is enough! Parentsuntil () is easy to misinterpret as selecting only one element ...
jquery Find--parent/parents/parentsuntil/closest
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
