jquery parents()和closest()用法与区别介绍
来源:http://www.111cn.net/wy/jquery/46871.htm多谢分享
例1
代码如下 | 复制代码 |
<ul class="box" name="a"> <li name="b" class="li_moito"><p><a href="#" class="moto">Hello Moto</a></p></li> </ul> |
如果要获取class="moto"的父级元素LI,可以用$(".moto").parent().parent()。但是比较繁琐,实想要获取父级标签还有另外两种方法的,即parents()与closest()。
parents()方法:
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。parents(),我想这个大家再熟悉不过了,它是取得所有符合条件的祖先元素(不包括本身),这是一个集合。
这里,我们可以:
代码如下 | 复制代码 |
$(".moto").parents("li[name='b']"); 或者 $(".moto").parents(".li_moito"); |
。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。
请思考这个带有基本的嵌套列表的页面:
代码如下 | 复制代码 |
<ul class="level-1"> |
如果我们从项目 A 开始,则可找到其祖先元素:
代码如下 | 复制代码 |
$('li.item-a').parents().css('background-color', 'red'); |
closest()方法:
closest(),这个方法呢就是向上检查元素并逐级匹配。首先,会从自身来匹配,匹配成功就返回本身;不成功则向上寻找,直到找到匹配的选择器为止。如果没有则返回空对象。
可以这样写:
代码如下 | 复制代码 |
$(".moto").closest("li[name='b']"); 或者 $(".moto").closest(".li_moito"); |
closet(selector,context)中context参数的用法 从当前元素开始遍历到context元素结束,若不存在context参数遍历到根结点由此可见使用context参数可以提高查询效率!
代码如下 | 复制代码 |
|
5.context参数的分析
代码如下 | 复制代码 |
|
区分parents()与closest()
1、前者从父级开始匹配元素;而后者是从自身开始。
2、前者向上查找所有的父级元素,直至根元素,然后把这些查找的结果放到一个临时
的集合中,再通过额定的条件来进行筛选;后者是从自身元素开始向上查找,直到找到有效的匹配元素就停止。
3、前者返回元素值可以有0个、1个,或者是多个;后者只有0个或1个;