jquery parent和parents的区别分析
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery parent和parents的区别分析相关的知识，希望对你有一定的参考价值。
可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子说明：.代码如下:
<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\').parent()取到的是div2,div3,div4
$(\'p\').parent(\'.a\')取到的是div3
$(\'p\').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$(\'p\').parents()取到的是div1,div2,div3,div4
$(\'p\').parents(\'.a\')取到的是div3
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
.代码如下:
<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>
其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
例子中：
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div
转载，仅供参考。 参考技术A
从字面上不难看出parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。
下面列出例子说明：
HTML代码如下:
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test" /></td>
<td>some text</td>
</tr>
</table>
JQ代码如下：
$(document).ready(function()
$("#btn1").click(function()
alert($(this).parent().next().html());
);
);
其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parents()获取的是td,tr,table
parent()方法能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。
这个方法和.parents()很相似,但是.parent()只是进行单级的DOM树查找（也就是只查找一层，直接的父元素，而不是更加上级的祖先元素）。
此外，$( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
jquery中closest()parent() parents 区别
parent是找当前元素的第一个父节点，不管匹不匹配都不继续往下找
parents是找当前元素的所有父节点
closest() 是找当前元素的所有父节点 ，直到找到第一个匹配的父节点
parent()、parents()与closest()方法两两之间有类似又有不同，本篇简短的区分一下这三个方法。通过本篇内容，大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。
我们直接看例子来来说明一下这三个方法的使用区别：
- <ul id="menu" style="width:100px;">
- <li>
- <ul>
- <li> <a href="#">Home</a> </li>
- </ul>
- </li>
- <li>End</li>
- </ul>
- 接下来，分别看看这三个方法：
- <script type="text/javascript">
- //点击Home时
- $("#menu a").click(function() {
- $(this).parent("ul").css("background", "yellow"); //0
- $(this).parent("li").parent("ul").css("background", "yellow"); //1
- $(this).parents("ul").css("background", "yellow"); //2
- $(this).closest("ul").css("background", "yellow"); //1;
- });
- </script>
1.parent()方法从指定类型的直接父节点开始查找，在"0"中，<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>，接着找到<ul>，并将它的背景色设置为yellow。parent()返回一个节点。
2.parents()方法查找方式同parent()方法类似，不同的一点在于，当它找到第一的父节点时并没有停止查找，而是继续查找，最后返回多个父节点，如在"2"中，使得id为menu的ul整个背景色变成了yellow。
3.closest()方法查找时从包含自身的节点找起，它同parents()很类似，不同点就在于它只返回一个节点如在"3"中，实现的功能同1相同。但它使得代码量减小，同"2"相比又只返回单一的一个节点。可见，closest()方法在项目中的使用频率是比较大的。
以上是关于jquery parent和parents的区别分析的主要内容，如果未能解决你的问题，请参考以下文章
jquery中closest()parent() parents 区别
jQuery_parent() parents() closest()区别
jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq()