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的AJAX用法
May 10 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
javascript 实现map集合
Apr 03 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 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
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Python如何生成xml文件
2020/06/04 Python
Python 解析xml文件的示例
2020/09/29 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
2014年个人总结范文
2015/03/09 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers