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 void(0)的妙用
Oct 21 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
vue router demo详解
Oct 13 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
js正则匹配多个全部数据问题
Dec 20 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桌面中心(四) 数据显示
2007/03/11 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php数组分页实现方法
2016/04/30 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
js实现随机点名程序
2020/09/17 Javascript
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
本科生求职简历的自我评价
2013/10/21 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
工作决心书
2014/03/11 职场文书
婚庆司仪主持词
2014/03/15 职场文书
人事专员岗位说明书
2014/07/29 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
幸福中国演讲稿
2014/09/12 职场文书
村党建工作汇报材料
2014/11/02 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
办公室管理规章制度
2015/08/04 职场文书
六五普法学习心得体会
2016/01/21 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
python装饰器代码解析
2022/03/23 Python