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 相关文章推荐
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
Javascript 构造函数详解
Oct 22 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
移动端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
上海无线电三厂简史修改版
2021/03/01 无线电
4.与数据库的连接
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript静态的url如何传递
2007/05/03 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python进阶教程之异常处理
2014/08/30 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python执行精确的小数计算方法
2019/01/21 Python
Python循环结构的应用场景详解
2019/07/11 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
财产公证书
2014/04/10 职场文书
婚前协议书范本
2014/04/15 职场文书
雷锋精神演讲稿
2014/05/13 职场文书