jQuery向父辈遍历的方法

通过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"元素之间的所有元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <meta charset="UTF-8">
 5  <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 6 </script>
 7  <style>
 8  .container
 9  {
10     float:left;
11     margin-left:30px;
12  }
13 .container div
14   {
15     border:1px solid grey;
16     margin:15px auto;
17   }
18 .ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
19 {
20     width:150px;
21     height:150px;
22 }
23 .ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
24 {
25     width:120px;
26     height:120px;
27 }
28 .ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
29 {
30     width:90px;
31     height:90px;
32 }
33 .now1,.now2,.now3,.now4
34 {
35     width:60px;
36     height:60px;
37 }
38  </style>
39  <script>
40 $(document).ready(function(){
41 $(".now1").parent().css("border-color","red");
42 $(".now2").parents().css("border-color","red");
43 $(".now3").parents(".ancestor3-2").css("border-color","red");
44 $(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
45 }
46 );
47  </script>
48 </head>
49 <body>
50 <div>
51     <div class="container">
52         <div class="ancestor1-1"><div class="ancestor1-2"><div class="ancestor1-3"><div class="now1">给定元素</div></div></div></div>
53     </div>
54     <div class="container">
55         <div class="ancestor2-1"><div class="ancestor2-2"><div class="ancestor2-3"><div class="now2">给定元素</div></div></div></div>
56     </div>
57     <div class="container">
58         <div class="ancestor3-1"><div class="ancestor3-2"><div class="ancestor3-3"><div class="now3">给定元素</div></div></div></div>
59     </div>
60     <div class="container">
61         <div class="ancestor4-1"><div class="ancestor4-2"><div class="ancestor4-3"><div class="now4">给定元素</div></div></div></div>
62     </div>
63 </div>
64 </body>
65 </html>

效果图:

分类: JavaScript

时间: 2024-10-10 08:02:10

jQuery向父辈遍历的方法的相关文章

jQuery 遍历 - find() 方法

jQuery 遍历参考手册 实例 搜索所有段落中的后代 span 元素,并将其颜色设置为红色: $("p").find("span").css('color','red'); 亲自试一试 定义和用法 find() 方法获得当前元素集合中每个元素的后代,通过选择器.jQuery 对象或元素来筛选. 语法 .find(selector) 参数 描述 selector 字符串值,包含供匹配当前元素集合的选择器表达式. 详细说明 如果给定一个表示 DOM 元素集合的 jQu

使用JQuery和CSS3两种方法实现瀑布流布局

JQ实现瀑布流图片定位 1.jQuery是继prototype之后又一个优秀的Javascript框架 2.$(window).width() 浏览器视窗的宽度 outerWidth() = padding+border+width; width() = width/*在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(padding)的元素宽 度,outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,

jquery属性,遍历,HTML操作

Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQ

Spring-boot之jQuery File Upload后台配置方法

文件上传在Spring-boot中本身配置起来非常简单,但是有个多文件传递和单个传递的问题. 两者配置是略有不同的,而且还有一些让我这个技术小白很容易踩坑的地方. 重要的几点: 上传的是单个文件:  MultipartFile file 上传的是多个文件: MultipartFile[] file 先从单个文件上传 后台配置来说: public Map uploadFile(@RequestParam("file") MultipartFile file,HttpServletRequ

jquery里互为逆过程的方法

jquery里互为逆过程的方法reverse 在jquery里,有不少互为逆过程的方法,如parent()与children(),parents()与find(),first()和last()等,这些联合起来有助于理解. 一 children()和parent() 这是一对遍历dom的jquery方法,这两个方法只查找元素的上一级或者下一级,接受selector参数.不会继续向上或者向下查找.eg: html: <div>grandfather <div>parent <di

第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为"移动",使用"移动"还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师,但我不认识所有学生,只认识上学期教过的几位同学.比如小明.我们再用一小串代码来作解释: <body> <span id="ming">我是小明</span> <span>我坐在小明后面,我叫李四</sp

JQuery中each()的使用方法说明

对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用 each(callback) 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的

jquery性能优化的十种方法

jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. 在这里整理了十种jquery优化的方法,如下: 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法.例如

jQuery 参考手册 - 遍历

jQuery 参考手册 - 遍历 jQuery Ajax jQuery 数据 jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数描述 .add()将元素添加到匹配元素的集合中. .andSelf()把堆栈中之前的元素集添加到当前集合中. .children()获得匹配元素集合中每个元素的所有子元素. .closest()从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents()获得匹配元素集合中每个元素的子元素,包括文本和注释节