• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了parent,parents,parentsUntil等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

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


下面引用个例子

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

下面在看一个例子


//del event
$(".del").bind("click",function(event){
    var _tmpQuery=$(this);
    var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
    art.dialog.confirm('你确认删除该日志吗?',function(){
        $.post("myRun/managerlog_del.php",{id:id},function(tips){
            if(tips=='ok'){
                art.dialog.tips('成功删除');
                _tmpQuery.parents('tr:first').hide();
            }else{
                art.dialog.tips(tips,5);
            }
        });
        return true;
    });
});

涉及到的知识点:

var id=$("input[name='id']",$(this).parents("form:first")).attr("value");

参考文献:
parent():http://www.w3school.com.cn/jquery/traversing_parent.asp

parents():http://www.w3school.com.cn/jquery/traversing_parents.asp


parentsUntil() 方法

定义:parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到(但不包括)被选择器、DOM 节点或 jQuery 对象匹配的元素。

其实,parentsUntil()方法,以及nextUntil()方法、prevUntil()方法,原理一样。唯一不同的是nextUntil()是往下,prevUntil()是往上(同辈元素),parentsUntil()也是往上(找祖先元素)

下面看一个例子:

<body>
<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

<script>
$("li.item-a").parentsUntil(".level-1").css("background-color", "red");

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

</body>

得到结果如下:



分析:
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery获取元素父节点的方法
  • 有关jQuery中parent()和siblings()的小问题
  • jQuery中closest和parents的区别分析
  • jQuery中offsetParent()方法用法实例
  • jQuery中parentsUntil()方法用法实例
  • jQuery中parents()方法用法实例
  • jQuery中parent()方法用法实例
  • jQuery中parents()和parent()的区别分析
  • jQuery的:parent选择器定义和用法
  • jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

相关文章

  • 2017-08-16jQuery实现鼠标点击弹出渐变层的方法
  • 2017-08-16jquery if条件语句的写法
  • 2017-08-16JQUERY的AJAX请求缓存里的数据问题处理
  • 2017-08-16jQuery Ajax实现跨域请求
  • 2017-08-16jQuery 计算iframe 窗口大小的方法
  • 2017-08-16jQuery toggleClass应用实例(附效果图)
  • 2017-08-16jquery复选框checkbox实现删除前判断
  • 2017-08-16使用jQuery管理选择结果
  • 2017-08-16jQuery中select与datalist制作下拉菜单时的区别浅析
  • 2017-08-16jQuery实现跨域iframe接口方法调用

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Jquery带搜索框的下拉菜单
    • jquery 3D球状导航的文章分类
    • jquery实现点击展开列表同时隐藏其他列表
    • 学习jquery必备 api中英文对照的chm手册 下载
    • 使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
    • JQuery.get提交页面不跳转的解决方法
    • jQuery解析json数据实例分析
    • 事件冒泡是什么如何用jquery阻止事件冒泡
    • jquery显示隐藏input对象
    • jquery ajax局部加载方法详解(实现代码)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有