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 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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
ext监听事件方法[初级篇]
2008/04/27 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JS中类或对象的定义说明
2014/03/10 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python列表解析操作实例总结
2020/02/26 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
美国社交购物市场:MassGenie
2019/02/18 全球购物
一套SQL笔试题
2016/08/14 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
金融专业应届生求职信
2013/11/02 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2015年党员承诺书
2015/01/21 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
素质教育学习心得体会
2016/01/19 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书