jQuery 树形结构的选择器


Posted in Javascript onFebruary 15, 2010

DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings().
选择某个元素的"孩子" - children()

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#parent").children().length //得到所有的”孩子“(li)的个数,“3” 
$("#parent").children("#son1").text(); //得到第一个”孩子“(li)的值 - “第一列”

选择某个元素的“父母” - parent()
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son1").parent().attr("id");//得到ul的ID - "parent"

选择某个元素的“祖先”-parents() (注意:一级一级向上选择直到<html>)
<div id="grand"> 
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
</div> 
$("#son2").parents().each(function(i){ 
if(i<3) //只显示3代祖先 
alert($(this).html()); 
});

选择某个元素的“弟弟” - next()
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").next().text(); //选择#son3选择某个元素的“哥哥”

prev()
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").prev().text(); //选择#son1选择某个元素的“兄弟”

siblings()
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").siblings().text(); //选择#son1和#son3
Javascript 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
jQuery 处理网页内容的实现代码
Feb 15 #Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 #Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 #Javascript
Jquery iframe内部出滚动条
Feb 11 #Javascript
jquery 问答知识整理
Feb 11 #Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 #Javascript
jQuery 改变CSS样式基础代码
Feb 11 #Javascript
You might like
第六节--访问属性和方法
2006/11/16 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python配置grpc环境
2019/01/01 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
机电专业大学生求职信
2013/10/04 职场文书
计算机求职信
2013/12/01 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
求职信名称怎么写
2014/05/26 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
MongoDB支持的数据类型
2022/04/11 MongoDB