jquery 父节点
来源:互联网 发布:网络歌曲红尘歌曲 编辑:程序博客网 时间:2024/06/05 07:02
先分别看看这三个方法:
//点击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');
关注微信号 每天学一下 笑一下
0 0
- jquery DOM 父节点、祖先节点、子节点、子孙节点
- jquery 访问父节点
- jquery 父节点
- JQuery查询父节点或者子节点
- jquery获取父节点、子节点、兄弟节点方法
- jquery获取父节点、子节点、兄弟节点的方法
- jquery获取父节点,子节点。兄弟节点
- jquery节点
- JQuery动态显示当前选中节点的父节点
- jquery获取子节点和父节点的方法
- jquery获取子节点和父节点的示例代码
- jquery获取子节点和父节点的例子
- jquery获取子节点和父节点的示例代码
- jquery获取子节点和父节点的示例代码
- jquery获取子节点父节点的方法
- jquery获取子节点和父节点的示例代码
- jquery查找最近的父节点
- JQuery查找父、子、兄弟节点
- Merge Sorted Array
- Android 基于google Zxing实现对手机中的二维码进行扫描
- RevitAPI: 关闭当前文档Close Active Document
- Solr4.10使用教程(一):solr整合tomcat方法一
- Mac android studio 连接svn导入项目遇到的问题
- jquery 父节点
- 在C++ 中 如何调用 C# 写的DLL
- 斯坦福《机器学习》Lesson1-3感想-------3、线性回归二
- Unity导出的Android项目按钮无法点击问题
- java基础学习笔记3
- 用java实现音乐的播放
- 调用有道词典查词
- Soundex(map映射)
- 蒙版透明,子视图不透明