jquery .parents(), .parent() 和 closest()方法
2014-02-18 11:46
471 查看
parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点
parent()、parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法。通过本篇内容,大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。
我们直接看例子来来说明一下这三个方法的使用区别:
<ulid="menu"style="width:100px;">
<li>
<ul>
<li>
<ahref="#">Home</a>
</li>
</ul>
</li>
<li>
End
</li>
</ul>[/code]
接下来,分别看看这三个方法:
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官方的解释:
closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
closest对于处理事件委托非常有用。
这里parents()方法虽然是将查询到的元素都放在了一个临时集合中,但是它并不是按照正常Dom结构放的,而是按照查询的顺序放到临时容器中的,相当于是原始文档的倒序放置方式.注意:这里倒序的意思是说:元素的存放位置是倒序的,例如::first:,:last等存放的顺序是倒序的.
因为closest()函数逐级向上查找,直到发现匹配的元素后就停止了,因此它不支持过滤选择器tr:first等选择器,而parents()是要从多个元素中选择出来一个适合的,因此它可以使用过滤选择器.
例如:
$(this).closest("tr").remove();
$(this).parents("tr:first").remove();
parent()、parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法。通过本篇内容,大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。
我们直接看例子来来说明一下这三个方法的使用区别:
<ulid="menu"style="width:100px;">
<li>
<ul>
<li>
<ahref="#">Home</a>
</li>
</ul>
</li>
<li>
End
</li>
</ul>[/code]
接下来,分别看看这三个方法:
//点击Home时
$("#menua").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
returnfalse;});
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官方的解释:
closest(expr,[context]|object|element)
概述
jQuery1.3新增。从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。。closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
closest对于处理事件委托非常有用。
这里parents()方法虽然是将查询到的元素都放在了一个临时集合中,但是它并不是按照正常Dom结构放的,而是按照查询的顺序放到临时容器中的,相当于是原始文档的倒序放置方式.注意:这里倒序的意思是说:元素的存放位置是倒序的,例如::first:,:last等存放的顺序是倒序的.
因为closest()函数逐级向上查找,直到发现匹配的元素后就停止了,因此它不支持过滤选择器tr:first等选择器,而parents()是要从多个元素中选择出来一个适合的,因此它可以使用过滤选择器.
例如:
$(this).closest("tr").remove();
$(this).parents("tr:first").remove();
相关文章推荐
- jQuery方法parent() parents() closest()区别
- jQuery 之 parent、parents 和 closest 方法
- jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法
- JQuery.closest(),parent(),parents()寻找父结点
- [转载]JQuery.closest(),parent(),parents()寻找父节点
- jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法
- jQuery通过parent()和parents()方法访问父级元素
- jquery parent() parents() closest()区别
- jQuery向上遍历DOM树之parents()、parent()及closest()的区别[转]
- jquery的closest方法和parents方法的区别
- Jquery学习笔记:利用parent和parents方法获取父节点
- jQuery向上遍历DOM树之parents()、parent()及closest()的区别
- jQuery筛选器找父亲parent,closest,parents,parentUntil
- jquery的closest方法和parents方法的区别
- jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
- jquery的parent和parents方法区别
- jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
- jquery parent() parents() closest()区别
- jQuery中parent()、parents()、parentsUntil()三个方法的区别
- JQuery.closest(),parent(),parents()寻找父结点