Home >Web Front-end >JS Tutorial >Share the difference between parent and parents in jquery

Share the difference between parent and parents in jquery

黄舟Original: 2017-06-23 15:32:481650browse

It can be seen that the value of parent is very clear, which is the parent element of the current element; parents is the ancestor element of the current element. Examples are listed below:

<p id=&#39;p1&#39;>
<p id=&#39;p2&#39;><p></p></p>
<p id=&#39;p3&#39; class=&#39;a&#39;><p></p></p>
<p id=&#39;p4&#39;><p></p></p>
</p>

$('p').parent() gets p2, p3, p4
$('p').parent('.a ') gets p3
$('p').parent().parent() gets p1, which is rather strange; but Jquery Object Its own characteristics determine that this is feasible.
$('p').parents() gets p1, p2, p3, p4
$('p').parents('.a') gets p3
parent (exp) Usage: Get an element set containing the unique parent element of all matching elements.

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script> 
</head> 
<body> 
<table>
<tr>
      <td><input id="btn1"  class="btn" type="button"  value="test" /></td>
      <td>some text</td>
</tr>
</table>

Among them:
this.parent() is the td in front of the input
this.parent().parent() obtains tr
this.parent().parent() .parent() obtains table
this.parent().next() obtains td
adjacent to td. In the example:

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

$("p") .parent() gets: e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a3e388a4556c0f65e1904146cc1a846beeHello94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3 object, because the parent tag of the p tag is p

Using jquery’s parents()

I encountered an interesting problem today. jquery has two functions parent() and parents(). Through these two functions, you can find the parent object of an object. Also known as jquery's selector. For example:

<body>
<div id="one">
<div id="two">hello</div>
<div id="three">
<p>
<a href="#">tonsh</a>
</p>
</div>
</div>

$("a").parent() will get the parent objecte388a4556c0f65e1904146cc1a846bee
$("a").parents() will get the parent object00cdd74976f45d3c7ac132ec48f75e9bdd1ad21d926ab3d81e0b74863b822d1b
$("a").parents().filter("div") will getdc0c0bf950c16358990a944092168089dd1ad21d926ab3d81e0b74863b822d1b, which is OK Written as $("a").parents("div").
If you want the 0d2b8ff6d648b89a944975f20a7117fa object, you can write it like this: $("a").parents("div:eq(0)").
What should I do if the content in 0d2b8ff6d648b89a944975f20a7117fa pops up when I click the 3499910bf9dac5ae3c52d5ede7383485 link?

var id=$("a").parents("div:eq(1)").children("div:eq(0)").html(); 
alert(id);

The above is the detailed content of Share the difference between parent and parents in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between jQuery selector input and :inputNext article：The difference between jQuery selector input and :input

See more

Share the difference between parent and parents in jquery

Related articles