Jquery搜索父元素操作方法

本文实例讲述了Jquery搜索父元素操作方法。分享给大家供大家参考。具体分析如下：

1. parents()方法

格式:

代码如下:

parents([selector])

用于获取当前匹配元素集合中每个元素的祖先元素，根据需要还可以使用一个选择器进行筛选。
如：

代码如下:

$("p").parents().css("border", "1px solid blue);

2. cloest方法

格式:

代码如下:

closest(selector[, context])

该方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。
如：

代码如下:

$("a").closest("div").css("border", "1px solid blue");

cloest()和parents()方法的主要区别如下：

① 前者从当前元素匹配查找，后者从父元素开始匹配查找

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

③ 前者返回0或者1个元素，后者可能包含0个、1个或者多个元素。

3. parent()方法

格式:

代码如下:

parent([selector])

用于获取当前匹配元素集合中每个元素的父元素，根据需要，还可以使用一个选择器进行筛选。

如：

代码如下:

$("p").parent().css("border", "1px solid blue");

4. parentsUtil()方法

格式:

代码如下:

parentsUtil([selector])

用于获取当前匹配元素集合中每个元素的祖先元素，直至给定选择器匹配的元素(但不包括该元素)

如：

代码如下:

$("li#li2").parentsUtil("#ul1_li2").css("background", "#FCF");

5. offsetParent()方法

用于搜索第一个匹配元素的已定位的父元素，仅对可见元素有效，语法格式如下：

代码如下:

offsetParent()

该方法查找第一个匹配元素的已定位元素，并返回由该元素包装成的jQuery对象。

综合例子：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>从文档中搜索指定元素的祖辈元素和父元素</title> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
  $(document).ready(function(){ 
    $("p").parent().css("border","1px solid #999");  //给p元素的父元素添加边框样式 
    $("p").closest("div").css("color","blue");       //给指定p元素的第一个匹配的上级元素设置字体颜色 
    $("li").parents("div").css("background","#FCF").css("height","40px");//设置li祖辈元素中div元素的样式。 
    $("p").css("background","#99C"); 
    }) 
</script> 
<style type="text/css"> 
   #top_div{ margin-top:4px; margin-left:30px;} 
   #top_div ul{ display:inline; list-style-type:none; margin:0px;} 
   #top_div li{ float:left; display:block; text-align:left; margin-left:2px; width:80px; padding-top:10px;} 
   #main_div{ margin-top:50px; margin-left:30px;} 
</style> 
</head> 
 
<body> 
<div id="top_div"> 
 <ul> 
    <li>新闻</li> 
    <li>网页</li> 
    <li>贴吧</li> 
    <li>知道</li> 
    <li>MP3</li> 
    <li>图片</li> 
    <li>视频</li> 
    <li>地图</li> 
 </ul>  
</div> 
<div id="main_div"> 
   <h3>标题一</h3> 
   <p>段落一</p> 
   <h3>标题二</h3> 
   <p>段落二</p> 
   <h3>标题三</h3> 
   <p>段落三</p> 
</div> 
 
</body> 
</html>

运行效果如下图所示：

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

赞 (0)

相关推荐

  • jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  • jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $("#ele").position(),进而得到 left = $("#ele").postion().left right = $("#ele").postion().right 2.相对文档定位:$("#ele").offset(), 进而得到 left = $("#ele").offset().left right =

  • 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

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

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法  for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法  $("#id").each

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

    本文实例讲述了jQuery获取父元素节点.子元素节点及兄弟元素节点的方法.分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父.子.兄弟等)的方法都是围绕这段代码来的: <ul class="par"> <li id="firstli"> <h3 class="title">条目一</h3> <ul class="par"> <li id=&

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

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

  • jquery实现点击TreeView文本父节点展开/折叠子节点

    jquery实现点击TreeView文本父节点展开/折叠子节点

    以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧. 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西.好吧,就从这里开始了. 今天客户提出要点击菜单(TreeView实现的)的父级节点时,展开节点.心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的. 首先思路是,,让文本点击的时候执行左边'+'号的事件,查看源码看到,'+'号的事件是: javascript:Tr

  • Jquery搜索父元素操作方法

    Jquery搜索父元素操作方法

    本文实例讲述了Jquery搜索父元素操作方法.分享给大家供大家参考.具体分析如下: 1. parents()方法 格式: 复制代码 代码如下: parents([selector]) 用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选. 如: 复制代码 代码如下: $("p").parents().css("border", "1px solid blue); 2. cloest方法 格式: 复制代码 代码如下: close

  • jQuery搜索子元素的方法

    jQuery搜索子元素的方法

    本文实例讲述了jQuery搜索子元素的方法.分享给大家供大家参考.具体分析如下: 1. children()方法 用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下: 复制代码 代码如下: children([selector]) $("#menu_ul").children().css("color", "blue"); 2. find()方法 用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下: 复制

  • jQuery搜索同辈元素方法

    jQuery搜索同辈元素方法

    本文实例讲述了jQuery搜索同辈元素方法.分享给大家供大家参考.具体分析如下: 1. next()方法 用于搜索紧跟在每个匹配元素之后的单个同辈元素,根据需要还可以指定一个选择器对同辈元素进行筛选,语法格式如下: 复制代码 代码如下: next([selector]) $("p").next("p").css("color", "#FCF"); 2. nextAll()方法 用于搜索紧跟在每个匹配元素之后的所有同辈元素,根据

  • JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ 先给大家上干货: [js的获取方式] <div id = "dom">          <div></div>           <div></div>      <div></div>  </div> function dom(){ var a = document.getElementByIdx_x_x(&qu

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

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

随机推荐