Jquery的parent和parents(找到某一特定的祖先元素)用法

最新推荐文章于 2023-10-02 06:44:41 发布
最新推荐文章于 2023-10-02 06:44:41 发布
阅读量245 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Akgu/p/5195369.html
版权
[html]  view plain  copy
 
  1. <!--  
  2. parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。  
  3. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。  
  4.   
  5. parent取得很明确就是当前元素的父元素  
  6. parents则是当前元素的祖先元素  
  7. -->  
  8. <html>  
  9.     <head></head>  
  10.     <body>  
  11.         <div id="div1">  
  12.         <div id="div2"><p></p></div>  
  13.         <div id="div3" class="a"><p></p></div>  
  14.         <div id="div4"><p></p></div>  
  15.         </div>  
  16.     </body>  
  17.     <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
  18.     <script type="text/javascript">  
  19.         $("p").parent();            //取得的是div2、div3、div4  
  20.         $('p').parent('.a');        //取得是div3  
  21.         $('p').parent().parent();   //取得是div1（这点比较奇特，不过Jquery对象本身的特点决定了这是可行的）  
  22.         $('p').parents();           //取得的是div1、div2、div3、div4  
  23.         $('p').parents('.a');       //取得的是div3  
  24.     </script>  
  25. </html>  

 

 

[html]  view plain  copy
 
  1.    <body>  
  2.     <table>  
  3.         <tr>  
  4.             <td><input id="btn1" class="btn" type="button" value="test"/></td>  
  5.                <td>some text</td>  
  6.            </tr>  
  7.        </table>  
  8.    </body>  
  9. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
  10.    <script type="text/javascript">  
  11. $(function(){  
  12.     $("#btn1").click(function(){  
  13.         alert($(this).parent().next().html());  
  14.         });  
  15.     });  


打印结果：some text

 

其中：

1、this.parent() 获取的是input前面的td；

2、this.parent().parent() 获取的是tr；

3、this.parent().parent().parent() 获取的是table；

4、this.parent().next() 获取的是input前面的td相邻的另一个td。

另一个例子中：

 

[html]  view plain  copy
 
  1. <div>  
  2.      <p>Hello</p>  
  3.      <p>Hello</p>  
  4. </div>  

 $('p').parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div

 

有关parents

 

[html]  view plain  copy
 
  1. <div id="one">  
  2.        <div id="Two">hello</div>  
  3.        <div id="Three">  
  4.         <p><a href="#">tonsh</a></p>  
  5.        </div>  
  6.        </div>  


$("a").parent() 将会得到父对象<p>

 

$("a").parents()  得到父对象<p><div.3><div.1>

$("a").parents().filter("div") 将得到<div.3><div.1> 还可以写成$("a").parents("div")。

如果想得到<div.2>对象可以写成这样：$("a").parents("div:eq(0)")。

如果点击<a>链接时弹出<div.2>中的内容该怎么办？

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

alert(id);

 

转载于:https://www.cnblogs.com/Akgu/p/5195369.html

axpf5763
关注
jQuery中的parent方法详解
PixelLancer的博客
10-05 1040
其中，parent()方法是jQuery提供的一个强大的方法之一，用于获取匹配元素集合中每个元素的直接父元素。通过使用parent()方法，我们可以方便地获取元素的直接父元素，并对其进行进一步操作或筛选，从而实现更灵活的页面操作和交互效果。parent()方法的作用是返回匹配元素集合中每个元素的直接父元素。其中，selector是要查找的元素的选择器，filter是一个可选参数，表示要筛选的父元素的选择器。然后，我们使用each()方法遍历父元素集合，并使用。// 获取所有元素的直接父元素。
jQuery中的parent方法、parents方法
热门推荐
徐冰的博客
11-09 1万+
一、parent()方法： 取得一个包含着所有匹配元素的唯一父元素的元素集合。 html代码如下： <form> <input type="radio" value="0"/>男<input type="radio" value="1"/>女 </form> jQuery代码如下： <script> var dom = $("[ty...
jQuery查找——parent/parents/parentsUntil/closest
qq_27009517的博客
06-12 1618
jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素，具体用法不同 parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。 parents()：沿 DOM 树向上遍历，直到文档的根元素(<html>)为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回零个、一个或多个元素。 closest()：沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。返回零个
关于Jquery的parent和parents
mecho的专栏
06-02 614
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。可以看出parent取的很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：$(p).parent()取到的是div2,div3,div4$(p).parent(.a)
jquery parent和parents的区别分析
12-09
parents则是当前元素的祖先元素。下面列出例子说明： 代码如下:’div1′>’div2′><p></p></div><div id=’div3′ class=’a’><p></p></div><div id=’div4′><p></p></div></div>$(‘p’).parent()取到的是div2,...
JQuery遍历元素的父辈和祖先的方法
10-21
例如，在给定的代码片段中，通过点击一个按钮，使用parent()方法可以找到并显示div4元素的父亲元素的id属性。 ```javascript $("#btn").click(function(){ $("#info").html("div4的父亲"+$("#div4").parent().attr...
jQuery中parents()和parent()的区别分析
10-25
与`parent()`函数不同的是，`parents()`会遍历所有祖先层级，返回一个包含所有父辈元素的jQuery对象。这就意味着无论父元素的层级有多深，`parents()`都会返回所有相关的祖先元素。显然，如果文档结构非常复杂，那么...
JQuery.closest(),parent(),parents()寻找父结点
10-28
在JavaScript的jQuery库中，`closest()`, `parent()`, 和 `parents()` 是三个非常重要的方法，用于在DOM树中查找元素的父级。这些方法在网页开发中常常被用来定位和操作元素，特别是在处理复杂的DOM结构时。下面将...
jquery的parent()方法
倒骑驴走着瞧的博客
03-17 2873
帮朋友查看一个问题，顺便捡一下web开发知识 parent() 方法返回被选元素的直接父元素 测试用例：修改li的父节点的兄弟节点的样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;
jQuery parent()方法
凯歌技术控团队
08-10 425
1.所有内边距属性在一个声明中 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;meta cha
使用jQuery的parent()方法来获取元素的父级元素。
最新发布
ByteWhiz的博客
10-02 484
通过使用jQuery的parent()方法，我们可以轻松地获取元素的父级元素，这对于处理DOM结构非常有用。在上面的代码中，我们使用".child"选择器选择class为"child"的元素，并调用parent()方法来获取其父级元素。需要注意的是，如果选择的元素没有父级元素，parent()方法将返回一个空的jQuery对象。在上面的代码中，我们使用".container-parent"选择器作为parent()方法的参数，这将限制父级元素的选择范围。parent()方法返回被选元素的直接父级元素。
jQuery中parent与parents方法
ANFO的博客
11-09 395
在jQuery中有两个可以获取父标签的方法parent()和parents()，二者的区别在于，parent()方法获取的父标签是距离调用者最近的父标签，而parents()方法获取的父标签是包含调用者的所有父标签组成的数组。 以下是代码示例： 首先用属性选择器选中form标签中type为submit的input标签，然后先调用parent方法，并将其jQuery对象转换为DOM对象再打印； ...
jQuery—向上遍历（parent/parents/parentUntil）
Scrow1204的博客
08-23 1174
注意：parentUntil方法指定的区间是开区间。   HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;向上遍历&lt;/title&gt; &lt;script s
jquery中parent()与parents()的比较
2012013977的博客
09-12 1205
jquery中parent()与parents()的比较
jQuery 遍历祖先
weixin_30861797的博客
06-02 148
祖先是父、祖父或曾祖父等等。 通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。 向上遍历 DOM 树 这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DO...
jQuery中.parent和.parents的区别
weixin_30600503的博客
10-22 457
.parent(selector)获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parents(selector)获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 如果给定一个表示 DOM 元素集合的 jQuery 对象， .parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 ...
jQuery 父元素选择器 parent() 和 parents()
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-27 8135
jQuery的父元素选择器小编很少使用，但却看到不少web开发者们经常使用。 小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下，在循环时可以将当前的索引绑定给需要点击的按钮，通过索引查找元素。 本篇文章在小编不推荐的情况下，还是决定写一篇。 先来一段 HTML结构代码 <table class="table table-bordered" id="user...
Jquery parent 和 parents 的区别
03-25
Jquery中的parent和parents都用于查找指定元素的父元素，但是它们的区别在于parent只查找一级父元素，而parents可以查找所有的祖先元素，可以通过使用参数来指定查找的祖先层数。例如，$('div').parent()将返回div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值