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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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编写的简单页面跳转功能实现代码
2013/11/27 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php创建类并调用的实例方法
2019/09/25 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python高级用法总结
2018/05/26 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
信息部岗位职责
2013/11/12 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
珍惜资源的建议书
2014/08/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS