读jQuery官方文档:遍历

时间:2021-05-19 00:21:56

遍历

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官方文档:&dollar;&lpar;document&rpar;&period;ready&lpar;&rpar;与避免冲突

    $(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有关的对象和属性&lpar;1&rpar;

    自从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树的搜索&lpar;1&rpar;

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

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

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

随机推荐

  1. volatile与synchronized的区别

    1.锁提供了两种主要特性:互斥(mutual exclusion) 和可见性(visibility). 互斥即一次只允许一个线程持有某个特定的锁,因此可使用该特性实现对共享数据的协调访问协议,这样,一 ...

  2. Charles使用详情

    Charles各版本下载: Charles for Windows 32 bit Charles for Windows 64 bit Charles for linux Charles for Ma ...

  3. 纯手写分页控件CSS&plus;JS&plus;SQL

    Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性 ...

  4. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  5. ASP&period;NET MVC Html&period;BeginForm用法1

    Html.BeginForm():该方法用于构建一个From表单的开始, 他的构造方法为:Html.BeginForm("ActionName","ControllerN ...

  6. select绑定json数组对象 asp&period;net

    ashx处理页 string JsonList = "["; IList<Models.Channel> ilist = BLL.ChannelManager.GetA ...

  7. php&lowbar;mysql、php&lowbar;mysqli 与 pdo&lowbar;mysql 的区别与选择

    php与mysql的连接有三种API接口,分别是:PHP的MySQL扩展 .PHP的mysqli扩展 .PHP数据对象(PDO) ,下面针对以上三种连接方式做下总结,以备在不同场景下选出最优方案.   ...

  8. LeetCode 283&period; Move Zeroes (移动零)

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  9. 使用FFMPeg对视频进行处理

    FFMPeg处理视频的核心操作方式是命令,无论是在Windows上还是Linux上.那么下边就简单介绍下,常见的处理命令. 示例1:截取一张352×240尺寸大小的,格式为jpg的图片: ffmpeg ...

  10. mouseover&comma;mouseout和mouseenter&comma;mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...