Home > Developer > Web Develop

The parent and parents of jquery (find a specific ancestor element)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

About the parent and parents of jquery

A parent is a collection of elements that gets a unique parent element that contains all the matching elements.
Parents is a collection of elements (without the root element) that has an ancestor element that contains all the matching elements. You can filter by an optional expression.
It can be seen that the parent takes very clear, that is, the current element of the parents element; Parents is the ancestor element of the current element. The following is an example description:
<div id= ' Div1 ' >
<div id= ' Div2 ' ><p></p></div>
<div id= ' div3 ' class= ' a ' ><p></p></div>
<div id= ' div4 ' ><p></p></div>
</div>

$ (' P '). The parent () takes the DIV2,DIV3,DIV4
$ (' P '). The parent ('. A ') takes the Div3
$ (' P '). The parent () parent () takes the Div1, which is quite peculiar, but the characteristics of the jquery object itself determine that this is possible.
$ (' P '). Parents () Take the DIV1,DIV2,DIV3,DIV4
$ (' P '). Parents ('. A ') takes the Div3

Parent (exp) Usage: Gets a collection of elements that contain a unique parent element for all matching elements.

    1. <script src= "Jquery-1.2.6.min.js" type= "Text/javascript" ></script>
    2. <script type= "Text/javascript" >
    3. $ (document). Ready (function () {
    4. $ ("#btn1"). Click (function () {
    5. Alert (this). Parent (). Next (). html ());
    6. });
    7. });
    8. </script>
    10. <body>
    11. <table>
    12. <tr>
    13. <td><input id= "btn1" class= "btn" type= "button" value= "Test"/></td>
    14. <td>some text</td>
    15. </tr>
    16. </table>
    17. ....
which
    1. This.parent () is the TD in front of input
    2. This.parent (). Parent () gets the TR
    3. This.parent (). Parent (). Parent () Gets the table
    4. This.parent (). Next () gets TD Pro TD

In another example:

<div><p>Hello</p><p>Hello</p></div>

$ ("P"). Parent () Gets the:<div><p>hello</p><p>hello</p></div> object because the parent tag of the P tag is a div.

jquery's parents () uses

Today, with an interesting question, jquery has two functions, parent () and parents (). These two functions allow you to find the parent object of an object, also called the jquery selector. As an example:

<body>
<div id= "One" >
<div id= "both" >hello</div>
<div id= "three" >
<p>
<a href= "#" >tonsh</a>
</p>
</div>
</div>

$ ("a"). The parent () will be given an object <p>
$ ("a"). Parents () Gets the parent object as <p><div.3><div.1>
$ ("a"). Parents (). Filter ("div") will get <div.3><div.1>, and can also be written as $ ("a"). Parents ("div").
If you want to <div.2> object can be written like this: $ ("a"). Parents ("Div:eq (0)").
What if I pop up <div.2> when i click the <a> link?

var id=$ ("a"). Parents ("Div:eq (1)"). Children ("Div:eq (0)"). html ();

alert (ID);

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
find xpath of element jquery each element of class jquery find index of object in array find parent with class find parent process id examples of specific attributes index of directory parent

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More