jQuery向父辈遍历的简单方法


Posted in Javascript onSeptember 18, 2016

通过DOM树可以可容易的访问到html文档中的所有元素

例如向上访问父辈的元素有以下方法

1.parent()方法可以得到所定元素的直接父元素

$("span").parent();得到<span>元素的直接父元素

2.parents()方法得到给定元素的所有父元素

$("span").parents();得到<span>元素的所有父元素

$("span").panents(".text");得到<span>元素的父元素中class="text"的元素

3.parentsUntil()方法得到两个给定元素之间的元素

$("span").parentsUntil(".text");得到<span>元素与class="text"元素之间的所有元素

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
 <style>
 .container
 {
  float:left;
  margin-left:30px;
 }
.container div
 {
  border:1px solid grey;
  margin:15px auto;
 }
.ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
{
  width:150px;
  height:150px;
} 
.ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
{
  width:120px;
  height:120px;
}
.ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
{
  width:90px;
  height:90px;
}
.now1,.now2,.now3,.now4
{
  width:60px;
  height:60px;
}
 </style>
 <script>
$(document).ready(function(){
$(".now1").parent().css("border-color","red");
$(".now2").parents().css("border-color","red");
$(".now3").parents(".ancestor3-2").css("border-color","red");
$(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
}
);
 </script>
</head>
<body>
<div>
  <div class="container">
    <div class="ancestor1-1"><div class="ancestor1-2"><div class="ancestor1-3"><div class="now1">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1"><div class="ancestor2-2"><div class="ancestor2-3"><div class="now2">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1"><div class="ancestor3-2"><div class="ancestor3-3"><div class="now3">给定元素</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1"><div class="ancestor4-2"><div class="ancestor4-3"><div class="now4">给定元素</div></div></div></div>
  </div>
</div>
</body>
</html>

效果图:

jQuery向父辈遍历的简单方法

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

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
js字符串引用的两种方式(必看)
Sep 18 #Javascript
jQuery实现获取元素索引值index的方法
Sep 18 #Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 #Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 #Javascript
JavaScript每天必学之事件
Sep 18 #Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 #Javascript
js完整倒计时代码分享
Sep 18 #Javascript
You might like
php学习笔记 数组的常用函数
2011/06/13 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
使javascript也能包含文件
2006/10/26 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
Python中正则表达式的用法总结
2019/02/22 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Django的models模型的具体使用
2019/07/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
药物学专业学生的自我评价
2013/10/27 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
新农村建设标语
2014/06/24 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
配置nginx负载均衡
2022/05/06 Servers