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 相关文章推荐
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
原生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批量生成随机用户名
2008/07/10 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
js实现五星评价功能
2017/03/08 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python处理Excel文件实例代码
2017/06/20 Python
python实现ID3决策树算法
2018/08/29 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
weblogic面试题
2016/03/07 面试题
大学军训感想
2014/02/12 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
大学毕业生推荐信
2014/07/09 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js