本文实例讲述了jquery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下:
先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的:
条目一 第一项 第二项
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相关内容感兴趣的读者可查看本站专题:《jquery遍历算法与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》、《jquery选择器用法总结》及《jquery常用插件及用法总结》
希望本文所述对大家jquery程序设计有所帮助。