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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
java实现单链表增删改查的实例代码详解
Aug 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函数serialize()与unserialize()的使用方法
2014/08/19 PHP
跟我学Laravel之路由
2014/10/15 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
Node.js学习入门
2017/01/03 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python 字符串格式化代码
2013/03/17 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
python实现简易通讯录修改版
2018/03/13 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python中的__init__作用是什么
2020/06/09 Python
kfc实习自我鉴定
2013/12/14 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
医者仁心观后感
2015/06/17 职场文书
python 逐步回归算法
2021/04/06 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android