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

在js中我们要获取父节点有很多办法,如

1)parentObj.firstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。

(2)parentObj.lastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。

在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...

(3)parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。

在jquery我们可以使用closest和parents

假设需要获取当前节点的祖父节点(父节点的父节点),其有属性class=”pp”,那么获取的方法为:

 代码如下 复制代码

$('#cur').parent().parent();

$('#cur').parent().parent('.pp');

$('#cur').parent('.pp');

获取父节点的方法closest([expr])。

 代码如下 复制代码

$('#cur').closest('.pp');

先举个例子,

 代码如下 复制代码

<ul class="parent1">
<li><a href="#" id="item1">jquery获取父节点</a></li>
<li><a href="#">jquery获取父元素</a></li>
</ul>

我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法:

1、parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

代码如下

 代码如下 复制代码

$('#item1').parent().parent('.parent1');

2、:parent

匹配含有子元素或者文本的元素

代码如下
 

 代码如下 复制代码
$('li:parent');

3、parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

代码如下

 代码如下 复制代码

$('#items').parents('.parent1');

closest和parents的主要区别是:

前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找
前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤
前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素

时间: 2024-10-22 17:32:14

jquery 获取父节点实现代码详解的相关文章

jQuery实现区域打印功能代码详解_jquery

使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

jquery获取父节点、子节点、兄弟节点方法

如我们利用parent()来获取父节点  代码如下 复制代码 $('#cur').parent().parent(); 或 $('#cur').parent().parent('.pp'); 或 $('#cur').parent('.pp'); closest和parents的主要区别是: 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找 前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤 前者返回0或

Android 获取手机联系人实例代码详解_Android

我的风格,废话不多说了,直接给大家贴代码了. 具体代码如下所示: package com.org.demo.demo; import com.org.wangfeng.R; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Butt

jquery获取下拉框值详解

我们利用js获取select值是比较麻烦的,下面我们来看看利用jquery来获取select值的代码吧,下面我们来看分二种获取方法. <select id="ddltype"> <option value="">请选择</option> <option value="1">安徽省</option> -- </select> <select id="ddltyp

Javascript调用父窗口程序代码详解

父面页代码:  代码如下 复制代码 <!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"> <html> <head> <title>html.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equ

js获取radio的值代码详解

把radio的input放在form中, <form name=theform> <input type=text name=input1 value="test"> <input type=radio name="a[]" value="0" checked>选择1 <input type=radio name="a[]" value="1">选择2 <

Android 获取手机联系人实例代码详解

我的风格,废话不多说了,直接给大家贴代码了. 具体代码如下所示: package com.org.demo.demo; import com.org.wangfeng.R; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Butt

jquery获取子节点和父节点的示例代码_jquery

一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

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

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