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 处理 URL 的两个函数代码
Aug 13 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
浅析python标准库中的glob
2020/03/13 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
应届生保险求职信
2013/11/11 职场文书
满月酒答谢词
2014/01/14 职场文书
市场营销毕业求职信
2014/08/07 职场文书
限期整改通知书
2015/04/22 职场文书
可怜妈妈观后感
2015/06/09 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python