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 相关文章推荐
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
jquery提示效果实例分析
Nov 25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 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
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python __slots__的使用方法
2020/11/15 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
应聘教师推荐信
2013/10/31 职场文书
优秀演讲稿范文
2013/12/29 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android