遍历

jQuery的快捷遍历方法可以快速定位到想要的元素。查找祖先元素

html<div class="grandparent">
<div class="parent">
<div class="child">
<span class="subchild"></span>
</div>
</div>
<div class="surrogateParent1"></div>
<div class="surrogateParent2"></div>
</div>
$('span.subchild').parent();		//returns [div.child]
$('span.subchild').parents(); //returns [div.child, div.parents, div.grandparent]
//也可以特指获取哪个祖先元素
$('span.subchild').parents('div.parent'); //returns [div.parent]

查找祖先元素还有.parentsUntil(), .closeset()

如果想要查找后代元素呢?有.children().find()方法:

$('span.grandparent').children();	//returns [div.parent, div.surrogateParent1, div.surrogateParent2]
$('span.grandparent').find('div'); //return [div.parent, div.child, div.surrogateParent1, div.surrogateParent2]

.children().find不同之处在于children只返回一层子元素,find返回所有后代元素。

此外,如果想要查找同辈元素呢?有

  • .next()
  • .nextAll()
  • .nextUntil()
  • .prev()
  • .prevAll()
  • .prevUntil()

还有返回所有同辈元素的siblings()

读jQuery官方文档:遍历的更多相关文章

  1. 读jQuery官方文档:数据方法与辅助方法

    数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...

  2. 读jQuery官方文档:$(document).ready()与避免冲突

    $(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...

  3. 读jQuery官方文档:样式

    样式 使用jQuery,无论是设置或者获取元素样式都十分简便. // 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式) $('h1').css('fontSize'); $( ...

  4. 读jQuery官方文档:jQuery对象

    jQuery对象 当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象. var heading = $('h1'); jQuery对象是对DOM ELement封装过后的数组.注意, ...

  5. 读BeautifulSoup官方文档之与bs有关的对象和属性(1)

    自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...

  6. 读vue-cli3 官方文档的一些学习记录

    原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...

  7. 读BeautifulSoup官方文档之html树的打印

    prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...

  8. 读BeautifulSoup官方文档之html树的搜索(1)

    之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...

  9. 读BeautifulSoup官方文档之html树的修改

    修改html树无非是对其中标签的改动, 改动标签的名字(也就是类型), 属性和标签里的内容... 先讲这边提供了很方便的方法来对其进行改动... soup = BeautifulSoup('<b ...

随机推荐

  1. sqlserver任务导出Excle

    --sql语句就用下面的存储过程 /*--数据导出Excel 导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不存在,将自动创建文件,如果表不存在,将自动创建表基于通用性 ...

  2. HW7.4

    public class Solution { public static void main(String[] args) { int[] employee = new int[8]; int[] ...

  3. HW6.26

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  4. BNUOJ-29364 Bread Sorting 水题

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29364 题意:给一个序列,输出序列中,二进制1的个数最少的数.. 随便搞搞就行了,关于更多 ...

  5. Swift 基本语法2

    一.?和! 1.可选类型: ? 在swift中,可选类型(?)其根源是一个枚举型,里面有None和Some两种类型.其实所谓的nil就是Optional.None, 非nil就是Optional.So ...

  6. [Java 7][msvcr100.dll] Error when load Eclipse

    [Problem] After I updated to Java 7, I could not load Eclipse. Here comes the erros: Eclipse: eclips ...

  7. jquery ajax 事件执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  8. KeyTweak 键盘按键功能修改

    最近一致再用ThinkPad S3,悲剧的是上翻页和下翻页竟然和方向键在一起,经常按错光标不知道去哪里了. 实在忍受不了,竟然有这样的软件,哈哈. KeyTweak,用起来太方便了

  9. zoj 3823 Excavator Contest 构造

    Excavator Contest Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/show ...

  10. (转)如何在JavaScript与ActiveX之间传递数据2

    本文研究如何在JS等脚本语言与ActiveX控件之间通信,如何传递各种类型的参数,以及COM的IDispatch接口.使用类似的方法,可以推广到其他所有脚本型语言,如LUA,AutoCad等.本文将研 ...