先分别看看这三个方法:
//点击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;
});
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()方法在项目中的使用频率是比较大的。
下面写一下closest的实例 只因这次用到的是closest
<
script
type
=
"text/javascript"
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
>
</
script
>
<
div
class
=
"sale fl-l"
>
<
p
>
<
label
class
=
"bigtitle"
>尺寸</
label
>
</
p
>
<
ul
>
<
li
>
<
label
>S</
label
>
</
li
>
<
li
>
<
label
>L</
label
>
</
li
>
</
ul
>
<
span
class
=
"updatemsg"
>
<
a
href
=
"javascript:void(0)"
onclick
=
"SaleUpdate(this)"
>修改</
a
>
</
span
>
</
div
>
<
script
>
function SaleUpdate(a) {
var lbs = $(a).closest('div').find('label');
console.log(lbs)
}
</
script
>
以上边为例
根据id: (div id) 下面意思一样
var lbs = $(a).closest('#id').find('label');
根据class:
var lbs = $(a).closest('.id').find('label');
关注微信号 每天学一下 笑一下