层次的级别有:parent/children/sibling。

父节点

父节点遍历方法有:$.fn.parent(), $.fn.parents(), $.fn.parentsUntil(), and $.fn.closest().示例如下:

<div class="grandparent"><div class="parent"><div class="child"><span class="subchild"></span></div></div><div class="surrogateParent1"></div><div class="surrogateParent2"></div>
</div>

// Selecting an element's direct parent
// returns [ div.child ]
$("span.subchild").parent();
// Selecting all the parents of an element that match a given selector
// returns [ div.parent ]
$("span.subchild").parents("div.parent");
// returns [ div.child, div.parent, div.grandparent ]
$("span.subchild").parents();
// Selecting all the parents of an element up to, but *not including* the selector
// returns [ div.child, div.parent ]
$("span.subchild").parentsUntil("div.grandparent");
// Selecting the closest parent, note that only one parent will be selected
// and that the initial element itself is included in the search
// returns [ div.child ]
$("span.subchild").closest("div");
// returns [ div.child ] as the selector is also included in the search
$("div.child").closest("div");

子节点

子节点的遍历方法有:$.fn.children() and $.fn.find()

$.fn.children()只找直接子节点,$.fn.find()迭代遍历所有的子节点。示例如下:

// Selecting an element's direct children
// returns [ div.parent, div.surrogateParent1, div.surrogateParent2 ]
$("div.grandparent").children("div");
// Finding all elements within a selection that match the selector
// returns [ div.child, div.parent, div.surrogateParent1, div.surrogateParent2 ]
$("div.grandparent").find("div"); 

兄弟节点

遍历兄弟节点的基本方法有:$.fn.prev();$.fn.next();$.fn.siblings();$.fn.nextAll();.fn.nextUntil(), $.fn.prevAll() and $.fn.prevUntil().

示例如下:

// Selecting a next sibling of the selectors
// returns [ div.surrogateParent1 ]
$("div.parent").next();
// Selecting a prev sibling of the selectors
// returns [] as No sibling exists before div.parent
$("div.parent").prev();
// Selecting all the next siblings of the selector
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$("div.parent").nextAll();
// returns [ div.surrogateParent1 ]
$("div.parent").nextAll().first();
// returns [ div.surrogateParent2 ]
$("div.parent").nextAll().last();
// Selecting all the previous siblings of the selector
// returns [ div.surrogateParent1, div.parent ]
$("div.surrogateParent2").prevAll();
// returns [ div.surrogateParent1 ]
$("div.surrogateParent2").prevAll().first();
// returns [ div.parent ]
$("div.surrogateParent2").prevAll().last();

$.fn.siblings()选择所有的兄弟节点:

// Selecting an element's siblings in both directions that matches the given selector
// returns [ div.surrogateParent1, div.surrogateParent2 ]
$("div.parent").siblings();
// returns [ div.parent, div.surrogateParent2 ]
$("div.surrogateParent1").siblings();

转载于:https://www.cnblogs.com/davidwang456/archive/2013/04/18/3029720.html

jquery学习手记(8)遍历相关推荐

  1. jquery学习手记(7)Data_utility_index方法

    Data方法 Js对dom元素增加一个属性时,你必须处理一些浏览器内存泄漏的问题.Jquery提供了一个元素保存数据的方法,该方替你管理内存问题.示例: // Storing and retrievi ...

  2. jquery学习手记(10)事件简介

    1. 使用jquery监听的方法有许多种: // The many ways to bind events with jQuery // Attach an event handler directl ...

  3. jquery学习手记(9)事件基础知识

    1. jquery事件机制提供了两个事件相关的帮助函数: $.fn.hover 提供一个或者两个传入函数参数 // The hover helper function $( "#menu l ...

  4. jquery学习手记(5)对象

    DOM和DOM元素 DOM是html文件的表现层,它包含了很多DOM元素,宏观上来讲,DOM元素可以被认为是web页面的一个片段.DOM的形式有类型如<div>, <a>, 或 ...

  5. jquery学习手记(4)元素的选择与操作

    一. 选择元素 id选择器,示例为: 1 // Selecting elements by ID 2 $("#myId"); // note IDs must be unique ...

  6. jquery学习手记(2)jQuery对象和DOM对象相互转换

    DOM对象 DOM文档对象模型,每一份DOM都可以表示成一棵树. 可以通过js中的getElementById或者getElementById来获取DOM对象. DOM对象可以使用js中的方法. 示例 ...

  7. jquery学习手记(1)

    1.$ vs $() $()方法中的参数是jQuery选择器并调用该选择器的方法,格式如下所示: $.fn,例子:$("h1").remove();自动接收和返回该选择器的动作. ...

  8. jquery学习手记(6)CSS, Styling, Dimensions

    Css方法 // Getting CSS properties $("h1").css("fontSize"); // returns a string suc ...

  9. jquery学习手记(3)属性

    属性的格式如下: $.fn.attr 该格式既可以获取属性的值也可以设置属性的值.示例如下: 设置属性 1 // Setting attributes 2 $("a").attr( ...

最新文章

  1. 【普及组模拟赛】家族
  2. 看TensorFlow如何玩转深度学习
  3. PHP日期、时间戳相关的小程序
  4. 【HYSBZ - 2763 】飞行路线 (分层图最短路,最短路dp)
  5. torch.cuda.is_available(),torch.cuda.device_count(),torch.cuda.get_device_name(0)
  6. unity3D游戏开发实战原创视频讲座系列9之塔防类游戏开发第一季
  7. 请大家帮忙,帮我看一下.net的这个问题
  8. vs2015 ankhsvn插件(AnkhSVN) v2.7.0.6493
  9. [luogu4315] 月下“毛景树”
  10. 【蓝桥杯】欧拉定理 + 欧拉数线性筛法
  11. 2020年最好用的离线下载网盘,不限速度和空间
  12. 《智能对话机器人开发实战20讲》--学习笔记--AIML基础功能拓展-与互联网的集成
  13. 做自己的神——极高自由度的功能游戏:我的世界
  14. 学习ZYNQ之FPGA2(开发板资源初探)
  15. 亿级流量电商详情页系统实战-1.小型电商网站的商品详情页的页面静态化架构以及其缺陷
  16. 2014 hack.lu oreo house of sprit
  17. 04 关于OSPF的环回口
  18. SMT阻容件常用规格参数
  19. iOS UIslider 设定滑块的大小
  20. 【操作系统】30天自制操作系统--(27)文件操作

热门文章

  1. java xsl生成word文件_导出生成xsl文件
  2. php流调签名,微信接口签名及调用流程详解 - 黎明互联-官方博客 - 黎明互联 - 区块链培训,PHP培训,IT培训,职业技能培训,追求极致!改变您的职业生涯!...
  3. Socket基础API介绍
  4. 三层交换机如何封装trunk_锐捷交换机常用配置命令汇总
  5. 67. Leetcode 450. 删除二叉搜索树中的节点 (二叉搜索树-基本操作类)
  6. 31. Leetcode 82. 删除排序链表中的重复元素 II (链表-双指针)
  7. 递归行为时间复杂度估算
  8. 对比学习系列论文SimROD(二): A Simple Adaptation Method for Robust Object Detection
  9. 文巾解题 8. 字符串转换整数 (atoi)
  10. Java进阶知识-数组类型