• 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()方法详解

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了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()方法详解

相关文章

  • JQuery鼠标移到小图显示大图效果的方法
  • 这些年、我收集的JQuery代码小结
  • JQuery对ASP.NET MVC数据进行更新删除
  • jquery.masonry瀑布流效果
  • JQuery自动触发事件的方法
  • jQuery控制控件文本的长度的操作方法
  • jQuery Easyui快速入门教程
  • jQuery学习笔记之 Ajax操作篇(二) - 数据传递
  • 解决jQuery动态获取手机屏幕高和宽的问题
  • JQuery实现用户名无刷新验证的小例子

文章分类

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

最近更新的内容

    • jQuery dialog 异步调用ashx,webservice数据的代码
    • ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
    • jQuery获取文本节点之 text()/val()/html() 方法区别
    • 页面内容排序插件jSort使用方法
    • jquery简单实现图片切换效果的方法
    • 基于jquery的横向滚动条(滑动条)
    • JQuery获取鼠标进入和离开容器的方向
    • jQuery简单tab切换效果实现方法
    • jQuery源码分析-01总体架构分析
    • ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

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

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