当前位置:  编程技术>WEB前端

jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    来源: 互联网  发布时间:2014-08-25

    本文导语:  .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。 .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents(...

.parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。

.parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。

如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。

这两个方法都可以接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。


下面引用个例子

代码如下:


     
  • I

  •  
  • II
      

         
    • A

    •    
    • B
          

             
      • 1

      •      
      • 2

      •      
      • 3

      •     

         

    •    
    • C

    •   

     

  •  
  • III



如果我们从项目 A 开始,则可找到其祖先元素
代码如下:

$('li.item-a').parents().css('background-color', 'red');

此次调用的结果是,level-2 列表、项目 II 以及 level-1 列表等元素(沿 DOM 树一路向上直到 )设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。由于我们未应用选择器表达式,所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器,则只会包含其中的匹配项目。

如果我们从项目 A 开始,则可找到其父元素:

代码如下:

$('li.item-a').parent().css('background-color', 'red');

此次调用的结果是,为 level-2 列表设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。

下面在看一个例子

代码如下:

body
   
one
       
hello

       
three
           

p
               tonsh
          


       

    



思考:
代码如下:

$("a").parent()
$("a").parents()
$("a").parents("div:eq(0)")
var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();

例三
代码如下:


 


 


 




代码如下:

$('p').parent()
$('p').parent('.a')
$('p').parent().parent()
$('p').parents()
$('p').parents('.a')

下面看一下以前项目中使用的例子
代码如下:

if(mysql_num_rows($query)){
  while($arr=mysql_fetch_array($query)){
echo 不符合。其实它是符合li.item-a的祖先元素的。但是根据parentsUntil()方法定义,是不包括选择器、DOM节点或jquery对象所匹配的元素的
 
  • I
  • -->不符合,这是它祖先元素的同辈元素。并不是li.item-a的祖先元素。
     
  • II  -->符合
       
      -->符合
           
    • A
    • -->从这开始往上找其祖先元素。
           
    • B
             

                 
      • 1

      •          
      • 2

      •          
      • 3

      •        

           

    •      
    • C

    •    

     

  •  
  • III



  • 再来看第二个语句:
    代码如下:

    $("li.item-2").parentsUntil( $("ul.level-1"), ".yes"  ).css("border", "3px solid blue");

    代码如下:

      -->是其祖先元素 且又满足选择器表达式".yes",但是根据parentsUntil()方法定义,是不包括选择器、DOM节点或jquery对象所匹配的元素的
       
    • I
    • 不匹配,不是其祖先元素。
       
    • II-->是其祖先元素 不满足
         
        -->是其祖先元素 满足选择器表达式".yes" [所以,最终匹配到该节点,得到如上图所示的蓝色边框效果]
             
      • A

      •      
      • B -->是其祖先元素
               
          -->是其祖先元素
                   
        • 1

        •          
        • 2
        • -->从这开始往上找其祖先元素。
                   
        • 3

        •        

             

      •      
      • C

      •    

       

    •  
    • III



        
     
     

    您可能感兴趣的文章:

  • jquery遍历筛选数组与遍历解析json对象
  • jquery遍历checkbox代码与说明
  • jquery进行数组遍历如何跳出当前的each循环
  • jquery遍历checkbox的注意事项说明
  • jquery遍历checkbox简单示例
  • jquery遍历checkbox介绍
  • Jquery遍历Table表头(示例)
  • jQuery遍历Table应用示例
  • jQuery基于当前元素进行下一步的遍历
  • jquery遍历select元素的二种方法(实例)
  • jquery遍历select元素(实例讲解)
  • Jquery遍历checkbox获取选中项value值的方法
  • jquery中each遍历对象和数组示例
  • Jquery遍历修改url请求参数的代码详解
  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
  • Jquery遍历节点的实现代码
  • jquery遍历与修改url请求参数的方法
  • JQuery 节点遍历的例子
  • Jquery遍历节点的方法小集
  • Jquery节点遍历next与nextAll方法使用示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • jquery选择器之内容过滤选择器详解
  • JQuery动画animate的stop方法使用详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • Jquery中$命名冲突问题详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • jQuery.extend 函数的用法详解
  • jQuery之ajax删除详解
  • jquery与直接写JS的区别详解
  • jquery移除、绑定、触发元素事件使用示例详解
  • jQuery解析JSON数据实例详解
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • 网络技术 iis7站长之家
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3