Home > Developer > JavaScript
. Parent (selector)ObtainParent Element, Filtered by selector (optional ).
. Parents (selector)ObtainAncestor Element, Filtered by selector (optional ).
If a jQuery object indicating a DOM element set is specified ,. the parents () method allows us to search for the ancestor elements of these elements in the DOM tree and construct a new jQuery object with matching elements arranged sequentially from the nearest parent element. Elements are returned in the order of the nearest parent element .. The parents () and. parent () methods are similar. The difference is that the latter traverses a single level up the DOM tree.
Both methods can accept the optional selector expression, which is the same as the parameter type passed to the $ () function. If this selector is applied, the system checks whether the element matches the selector to filter the element.
The following is an example.
Copy codeThe Code is 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 from Project A, we can find its ancestor Element
Copy codeThe Code is as follows:
('Li.item-a'hangzhou.parents().css ('background-color', 'red ');
The result of this call is that the level-2 list, Project II, level-1 List, and other elements (along the DOM tree all the way up until
If we start from Project A, we can find its parent element:
Copy codeThe Code is as follows:
Parameters ('li.item-a'hangzhou.parent().css ('background-color', 'red ');
The result of this call is to set a red background for the level-2 list. Since selector expressions are not applied, the parent element is naturally part of the object. If the selector has been applied, the system checks whether the element matches the selector before it contains the element.
The following is an example.
Copy codeThe Code is 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>
Thoughts:
Copy codeThe Code is as follows:
$ ("A"). parent ()
$ ("A"). parents ()
$ ("A"). parents ("div: eq (0 )")
Var id = $ ("a"). parents ("div: eq (1)"). children ("div: eq (0)" pai.html ();
Example 3
Copy codeThe Code is as follows:
<Div id = 'div1 '>
<Div id = 'div2'> <p> </div>
<Div id = 'did3' class = 'A'> <p> </div>
<Div id = 'div4 '> <p> </div>
</Div>
Copy codeThe Code is as follows:
$ ('P'). parent ()
$ ('P'). parent ('. ')
$ ('P'). parent (). parent ()
$ ('P'). parents ()
$ ('P'). parents ('. ')
The following describes the examples used in previous projects.
Copy codeThe Code is 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 Logon logs </td> </tr> ";
}
Jquery code
Copy codeThe Code is as follows:
// Delete the selected 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: 'info', icon: 'Face-smile ', content: 'deleted successfully', OK: function () {art. dialog. close (); location. reload ();}});
} Else {
Art. dialog. tips ('deletion failed ');
}
});
Return true;
});
} Else {
Art. dialog. through ({title: 'info', icon: 'Face-sad ', content: 'select the 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 this log? ', Function (){
$. Post ("myRun/managerlog_del.php", {id: id}, function (tips ){
If (tips = 'OK '){
Art. dialog. tips ('deleted successfully ');
_ TmpQuery. parents ('tr: first '). hide ();
} Else {
Art. dialog. tips (tips, 5 );
}
});
Return true;
});
});
Knowledge points involved:
Var id = $ ("input [name = 'id']", $ (this). parents ("form: first"). attr ("value ");
References:
Parent (): http://www.w3school.com.cn/jquery/traversing_parent.asp
Parents (): http://www.w3school.com.cn/jquery/traversing_parents.asp
ParentsUntil () method
Definition: parentsUntil () obtains the ancestor element of each element in the currently matched element set until (but not including) the element that is matched by the selector, DOM node, or jQuery object.
In fact, the parentsUntil () method, the nextUntil () method, and the prevUntil () method have the same principle. The only difference is that nextUntil () is down, prevUntil () is up (same Generation Element), and parentsUntil () is up (looking for ancestor elements)
The following is an example:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript" src = "/jquery. js"> </script>
</Head>
<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 result is as follows:
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
