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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
javascript 常见功能汇总
Jun 11 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
微信公众号token验证失败解决方案
2019/07/22 Python
pytorch实现查看当前学习率
2020/06/24 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技