. Parent (selector) gets the parent element of each element in the current matching element collection, optionally filtered by the selector.
. Parents (selector) obtains the ancestor element of each element in the current matching element collection, optionally filtered by the selector.
Given a JQuery object that represents a collection of DOM elements, the. Parents () method allows us to search the DOM tree for the ancestor elements of these elements and construct a new JQuery object with matching elements arranged in the order of the nearest parent element. The elements are returned in the order that they were taken out of the nearest parent element. . Parents () is similar to the. Parent () method, unlike the latter traversing a single hierarchy up the DOM tree.
Both of these methods can accept an optional selector expression that is the same as the argument type we pass to the $ () function. If this selector is applied, the element is filtered by detecting whether the element matches the selector.
Here's a quote for an example
Copy Code code as follows:
<ul class= "Level-1" >
<li class= "Item-i" >I</li>
<li class= "Item-ii" >ii
<ul class= "Level-2" >
<li class= "Item-a" >A</li>
<li class= "Item-b" >b
<ul class= "Level-3" >
<li class= "Item-1" >1</li>
<li class= "Item-2" >2</li>
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "Item-c" >C</li>
</ul>
</li>
<li class= "ITEM-III" >III</li>
</ul>
If we start with Project A, we can find its ancestor elements
Copy Code code as follows:
$ (' li.item-a '). Parents (). CSS (' background-color ', ' red ');
As a result of this call, elements such as the Level-2 list, items II, and Level-1 list (along the DOM tree up to
If we start with Project A, we can find the parent element:
Copy Code code as follows:
$ (' li.item-a '). Parent (). CSS (' background-color ', ' red ');
The result of this call is to set a red background for the Level-2 list. Since we did not apply a selector expression, the parent element naturally became part of the object. If the selector is applied, the element is instrumented to match the selector before the element is included.
Here's a look at an example
Copy Code code as follows:
<body>body
<div id= "One" >one
<div id= "Two" >hello</div>
<div id= "three" >three
<p>p
<a href= "#" >tonsh</a>
</p>
</div>
</div>
</body>
Thinking:
Copy Code code as follows:
$ ("a"). Parent ()
$ ("a"). Parents ()
$ ("a"). Parents ("Div:eq (0)")
var id=$ ("a"). Parents ("Div:eq (1)"). Children ("Div:eq (0)"). html ();
Example Three
Copy Code code as follows:
<div id= ' Div1 ' >
<div id= ' Div2 ' ><p></p></div>
<div id= ' div3 ' class= ' a ' ><p></p></div>
<div id= ' div4 ' ><p></p></div>
</div>
Copy Code code as follows:
$ (' P '). Parent ()
$ (' P '). Parent ('. a ')
$ (' P '). Parent (). Parent ()
$ (' P '). Parents ()
$ (' P '). Parents ('. a ')
Let's take a look at the examples used in previous projects
Copy Code code as follows:
if (mysql_num_rows ($query)) {
while ($arr =mysql_fetch_array ($query)) {
Echo <<<admin
<tr style= "Text-align:center;" >
<td><input type= "checkbox" name= "checkbox" value= "$arr [id]"/></td>
<td> $arr [id]</td>
<td> $arr [log]</td>
<td> $arr [ip]</td>
<td> $arr [time]</td>
<td><form><input type= "hidden" name= "id" value= "$arr [id]"/><span class= "del" > Delete </span ></form></td>
</tr>
Admin
}//while end;
}else{
echo "<tr align=center><td colspan=6> No login log </td></tr>";
}
jquery related Code
Copy Code code as follows:
Delete checked log
$ (". Delcheckbox"). Click (function () {
var str= ';
$ (". tab input[name=checkbox]:checked"). each (function () {
str+=$ (This). Val () + ', ';
});
Str=str.substring (0,str.length-1);
if (Chk_batch_pkey (str)) {
Art.dialog.confirm (' Are you sure you want to delete the selected log? ', function () {
$.post ("myrun/managerlog_del.php", {id:str},function (tips) {
if (tips== ' OK ') {
Art.dialog.through ({title: ' Information ', Icon: ' Face-smile ', content: ' Delete Success ', Ok:function () {art.dialog.close (); Location.reload ();});
}else{
Art.dialog.tips (' delete failed ');
}
});
return true;
});
}else{
Art.dialog.through ({title: ' Info ', icon: ' Face-sad ', content: ' Please select deleted log ', Ok:function () {art.dialog.close ();}});
}
}). addclass ("pointer");
Del Event
$ (". Del"). Bind ("click", Function (event) {
var _tmpquery=$ (this);
var id=$ ("Input[name= ' id ')", $ (this). Parents ("Form:first")). attr ("value");
Art.dialog.confirm (' Are you sure you want to delete the log? ', function () {
$.post ("myrun/managerlog_del.php", {id:id},function (tips) {
if (tips== ' OK ') {
Art.dialog.tips (' successful deletion ');
_tmpquery.parents (' Tr:first '). Hide ();
}else{
Art.dialog.tips (tips,5);
}
});
return true;
});
});
the knowledge points involved:
var id=$ ("Input[name= ' id ')", $ (this). Parents ("Form:first")). attr ("value");
Reference documents:
Parent (): http://www.w3school.com.cn/jquery/traversing_parent.asp
Parents (): http://www.w3school.com.cn/jquery/traversing_parents.asp
Parentsuntil () method
Definition: Parentsuntil () Gets the ancestor element of each element in the current matching element collection until (but not including) elements that are matched by selectors, DOM nodes, or JQuery objects.
In fact, the Parentsuntil () method, as well as the Nextuntil () method, Prevuntil () method, the same principle. The only difference is that Nextuntil () is down, prevuntil () is upward (sibling element), Parentsuntil () is also up (find ancestor Element)
Let's look at an example:
Copy Code code as follows:
<! DOCTYPE html>
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<body>
<ul class= "Level-1 yes"
<li class= "Item-i" >I</LI>
<li class= "Item-ii" >ii
<ul class= "Level-2 yes"
< Li class= "item-a" >a</li>
<li class= "Item-b" >b
<ul class= "level-3"
<li class= "item-1" >1</LI>
<li class= "Item-2" >2</li>
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "item-c" >C</LI>
</ul
</LI>
<li class= "ITEM-III" >III</LI>
</ul>
<script>
$ ("Li.item-a"). Parentsuntil (". Level-1"). CSS ("Background-color", "Red");
$ ("Li.item-2"). Parentsuntil ($ ("ul.level-1"), ". Yes")
. CSS ("Border", "3px solid Blue");
</script>
</body>
The results were as follows:
Analysis:
Copy Code code as follows:
$ ("Li.item-a"). Parentsuntil (". Level-1"). CSS ("Background-color", "Red");
Copy Code code as follows:
<ul class= "Level-1 yes" >--> does not conform. In fact, it conforms to the ancestral elements of li.item-a. However, according to the Parentsuntil () method, the element that does not include a selector, a DOM node, or a jquery object is defined.
The <li class= "item-i" >I</li>--> does not conform, which is the sibling of its ancestor element. is not a li.item-a ancestor element.
<li class= "Item-ii" >II--> compliant
<ul class= "Level-2 yes" >--> compliant
<li class= "Item-a" >A</li>--> from this start looking up its ancestor elements.
<li class= "Item-b" >b
<ul class= "Level-3" >
<li class= "Item-1" >1</li>
<li class= "Item-2" >2</li>
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "Item-c" >C</li>
</ul>
</li>
<li class= "ITEM-III" >III</li>
</ul>
Let's look at the second statement:
Copy Code code as follows:
$ ("Li.item-2"). Parentsuntil ($ ("ul.level-1"), ". Yes"). CSS ("Border", "3px solid Blue");
Copy Code code as follows:
<ul class= "Level-1 yes" >--> is its ancestor element and satisfies the selector expression ". Yes", but is defined by the Parentsuntil () method, excluding elements that are matched by selectors, DOM nodes, or jquery objects.
<li class= "Item-i" >I</li> does not match, not its ancestor element.
<li class= "Item-ii" >II--> is not satisfied with its ancestral elements
<ul class= "Level-2 yes" >--> is its ancestor element that satisfies the selector expression ". Yes" [therefore, the final match to the node, resulting in the blue border effect as shown above]
<li class= "Item-a" >A</li>
<li class= "Item-b" >b--> is its ancestor element
<ul class= "level-3" >--> is its ancestor element
<li class= "Item-1" >1</li>
<li class= "Item-2" >2</li>--> from this start looking up its ancestor elements.
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "Item-c" >C</li>
</ul>
</li>
<li class= "ITEM-III" >III</li>
</ul>
