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


Posted in Javascript onSeptember 18, 2016

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>

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

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>

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

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

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

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

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

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

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>

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

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

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

Javascript 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
移动端js触摸事件详解
Sep 18 #Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 #Javascript
jQuery向父辈遍历的简单方法
Sep 18 #Javascript
js字符串引用的两种方式(必看)
Sep 18 #Javascript
jQuery实现获取元素索引值index的方法
Sep 18 #Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 #Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 #Javascript
You might like
比较详细PHP生成静态页面教程
2012/01/10 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Python for循环及基础用法详解
2019/11/08 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
电视购物广告词
2014/03/19 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
期末复习计划
2015/01/19 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
运动会观后感
2015/06/09 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS