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

Source: Internet
Author: User

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>
    9. <body>
    10. <table>
    11. <tr>
    12. <td><input id= "btn1" class= "btn" type= "button" value= "Test"/></td>
    13. <td>some text</td>
    14. </tr>
    15. </table>
    16. ....
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 digest is from: http://www.cnblogs.com/myjavawork/articles/1868991.html.

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

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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