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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 父元素节点
, 子元素节点
兄弟元素节点
jquery 元素兄弟节点、jquery兄弟节点、jquery上一个兄弟节点、jquery获取兄弟节点、jquery前一个兄弟节点,以便于您获取更多的相关知识。

时间: 2024-09-14 18:34:19

jQuery获取父元素节点、子元素节点及兄弟元素节点的方法_jquery的相关文章

js与jQuery 获取父窗、子窗的iframe

 本篇文章介绍了js与jQuery 获取父窗.子窗的iframe.需要的朋友可以过来参考下,希望对大家有所帮助 在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素   js   在父窗口中获取iframe中的元素    1.   格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").clic

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, 1.<ul class="parent1"> 2.<li><a href="#" id="item1">jquery获取父节点</a></li> 3.<li><a href="#">

jQuery获取父元素及父节点的方法小结_jquery

本文实例总结了jQuery获取父元素及父节点的方法.分享给大家供大家参考,具体如下: jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> &

js与jquery获取父级元素,子级元素,兄弟元素的实现方法

 本篇文章主要是对js与jquery获取父级元素,子级元素,兄弟元素的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比   JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素   原生的JS获取ID为test的元素下的子元素.可以用:   比如:   <div id="dom">     <div></d

js与jquery获取父元素,删除子元素的两种不同方法

 本篇文章主要是对js与jquery获取父元素,删除子元素的两种不同方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法   var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法   1.对于上面获得的对象进行遍历   (1).js方法  for(vat i=0;j<obj

jquery 获取父节点实现代码详解

在js中我们要获取父节点有很多办法,如 1)parentObj.firstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法.这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点. (2)parentObj.lastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点.与firstChild一样,它也可以递归使用. 在使用中,

JQuery 获取父框架的对应ID

JQuery 获取父框架的对应ID 我要从b点击找到index里对应的层,等于是要从父框架动态取得对应的层 $(function(){     var curMenuId = undefined;         $("li>a").click(function(){         var menuId = this.id,             target = $('#' + menuId),             doc    = window.parent.docu

jQuery获取复选框被选中数量及判断选择值的方法详解_jquery

本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&

js与jquery获取父级元素,子级元素,兄弟元素的实现方法_javascript技巧

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素.可以用: 比如: <div id="dom">    <div></div>    <div></div>    <div></div></div> var