jQuery中的parent()和parents()有啥区别呢？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的parent()和parents()有啥区别呢？相关的知识，希望对你有一定的参考价值。
有大侠用过jQuery中的parent()和parents()函数没？它们有啥区别呢？请赐教~
parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
如果给定一个表示 DOM 元素集合的 jQuery 对象，
.parents() 方法允许在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。
元素是按照从最近的父元素向外的顺序被返回的。
.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。
这两个方法都可以接受可选的选择器表达式，与向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
<ul class="level-1"><li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
从项目 A 开始，则可找到其祖先元素
$('li.item-a').parents().css('background-color', 'red');此次调用的结果是，level-2 列表、项目 II 以及 level-1 列表等元素（沿 DOM 树一路向上直到 <html>）设置红色背景。
由于未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。
由于未应用选择器表达式，所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器，则只会包含其中的匹配项目。
如果从A 开始，则可找到其父元素：
$('li.item-a').parent().css('background-color', 'red');此次调用的结果是，为 level-2 列表设置红色背景。由于未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。
参考技术A 嘿嘿，这个我知道，jQuery中的parent()函数和parents()函数的区别是：[*]parent()函数是只往父级找一层；[*]parents()函数是往父级找多层，一直找到body标签。 参考技术B parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
可以看出parent取的很明确，就是当前元素的父元素；
parents则是当前元素的祖先元素。下面列出例子说明：
iv id='div1'>
<div id='div2'>
<p>222</p>
</div>
<div id='div3' class='a'>
<p>333</p>
</div>
<div id='div4'>
<p>444</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 参考技术C parent() 获得当前匹配元素集合中每个元素的父元素(父亲)，使用选择器进行筛选是可选的。
parents() 获得当前匹配元素集合中每个元素的祖先元素（包括父亲，爷爷.....祖先...原始人），使用选择器进行筛选是可选的。 参考技术D
“parent”是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
“parents”则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
使用区别：
[html] view plain copy
<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"); //3 return false;
);
</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() 寻找父级 或祖宗元素
jQuery查找——parent/parents/parentsUntil/closest
jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq()