jQuery获取父元素节点、子元素节点及兄弟元素节点的方法


Posted in Javascript onApril 14, 2016

本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下:

先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的:

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

JQUERY 父节点的获取:

jquery获取父元素方法比较多、比如parent()、parents()、closest()、find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点

如我们利用parent()来获取父节点

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

下面、我们主要来讲一下 parents() 和 closest() 两个方法的区别

1、closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找

2、closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤

3、closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素

代码可以这样写:

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY 兄弟节点的获取

jQuery兄弟节点获取、我们的思路是通过当前节点找到父节点、然后通过父节点去找到子节点、代码如下

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

还有一种方法是使用 siblings() 函数、代码如下

$(".title").siblings('ul');
//找到自己的兄弟节点ul

JQUERY 子节点的获取

匹配第一个子元素 :first 只匹配一个元素、而此选择符将为每个父元素匹配一个子元素

$(".par:first-child");
//取得id为firstli的节点

通过选择器去获取、代码如下:

$('#firstli h3.title');
//取得条目一的h3

使用find()函数、上面已经说过了、用法一样

$("#firstli").find("h3");
//找到子兄弟节点h3

使用children()函数、代码如下

$("#firstli").children("h3.title");
//取得子节点h3、class为title

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
JavaScript数组复制详解
Feb 02 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
原生js实现autocomplete插件
Apr 14 #Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 #Javascript
基于jQuery实现音乐播放试听列表
Apr 14 #Javascript
js仿3366小游戏选字游戏
Apr 14 #Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 #Javascript
Node.js实现数据推送
Apr 14 #Javascript
node.js实现端口转发
Apr 14 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
限制复选框的最大可选数
2006/07/01 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python常用小技巧总结
2015/06/01 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python实现简易动态时钟
2018/11/19 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
SQL Server笔试题
2012/01/10 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
员工培训邀请函
2014/01/11 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
人事局接收函
2015/01/31 职场文书
英语辞职信怎么写
2015/02/28 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Python自动化测试PO模型封装过程详解
2021/06/22 Python