JQuery遍历元素的父辈和祖先的方法

更新时间：2016年09月18日 10:55:15 投稿：jingxian

下面小编就为大家带来一篇JQuery遍历元素的父辈和祖先的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

JQuery遍历

首先我们要知道什么是父亲，儿子，后代，同胞，祖先

•<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。

•<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素

•左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。

•<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

•两个 <li> 元素是同胞（拥有相同的父元素）。

•右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。

•<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

父类和祖先的遍历

1.parent()

遍历直接父亲不往上遍历其它的祖先

<!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>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#info").html("div4的父亲"+$("#div4").parent().attr("id"));
  });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>

</body>
</html>

2.parents()

遍历它的所有祖先

.each(function(i,e){})

对其中的每个元素进行遍历

其中i是索引，e是当前对象，相当于$(this),但是前者是js对象，后者是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>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div4").parents().each(function(i, e) {
        $("#info").html($("#info").html()+"第"+i+"个祖先是,("+$(this).attr("id")+")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>

</body>
</html>

那你就会问了第三个和第四个祖先是什么鬼让我们在网页中按F12调试一下看看结果

当i=3 也就是到了第三个祖先结果是body

当i=4 也就是到了第四个祖先结果是html

3.parentsUntil()

遍历到指定的祖先(不包括该祖先)

<!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>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div4").parentsUntil("#div1").each(function(i, e) {
        $("#info").html($("#info").html()+"第"+i+"个祖先是,("+$(this).attr("id")+")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="点击" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>

</body>
</html>

所以范围是在#div4和#div1中间不包含#div1

以上这篇JQuery遍历元素的父辈和祖先的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery提示插件alertify使用指南
alertifyjs是一个非侵入式，可定制的JavaScript通知组件。包括可定制的对话框，和右下角消息弹出框。完全可定制的警报，确认和提示对话框、完全自定义的通知系统、回调参数处理包括“确定“和”取消“按钮的点击、允许对话框排队
2015-04-04
详谈jQuery unbind 删除绑定事件 / 移除标签方法
下面小编就为大家带来一篇详谈jQuery unbind 删除绑定事件 / 移除标签方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
浅谈jQuery中replace()方法
这篇文章主要介绍了jQuery中replace()方法用法,实例分析了replace()方法的功能、定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下
2015-05-05
13个绚丽的Jquery 界面设计网站推荐
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。
2010-09-09
jquery 事件执行检测代码
在写Web 应用，或者Web Ajax功能的时候我们经常需要处理事件，jquery已经非常完美的封装了事件，但是有时候事件的执行顺序还是会有微小差别
2009-12-12
jQuery实现的调整表格行tr上下顺序
表格元素是大家比较常用的元素，有时候表格中的行需要调整顺序，下面通过代码实例介绍一下如何利用jquery实现此功能
2016-01-01
jQuery实现html table行Tr的复制、删除、计算功能
这篇文章主要介绍了jQuery实现html table行Tr的复制、删除、计算功能,涉及jQuery针对table表格的常见复制、添加、删除与计算行数等简单操作技巧,需要的朋友可以参考下
2017-07-07
JQuery 无废话系列教程(二) jquery实战篇上
就进入实战?是不是太快了?我还不知道怎么用JQuery!! ...
2009-06-06
jquery ajax 局部无刷新更新数据的实现案例
这篇文章主要对jquery ajax 局部无刷新更新数据的实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jQuery实现加入购物车飞入动画效果
当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入购物车按钮时，实现商品将飞入到右侧的购物车中的效果。
2015-03-03