文章目录
jQuery 遍历元素
什么是遍历？
jQuery 遍历，即“移动”，用于根据 HTML 元素与其他元素的关系“查找”（或选择）HTML 元素。从一个选择开始，然后移动该选择，直到找到所需的元素。
下图将 HTML 页面显示为一棵树（DOM 树）。使用 jQuery 遍历函数，您可以轻松地从选定的（当前）元素开始在树中向上（祖先）、向下（后代）和向侧面（兄弟）移动。此移动称为遍历（或移动）DOM 树。
图示说明：
<div> 元素是 <ul> 的父元素，也是其中所有元素的祖先
<ul> 元素是两个 <li> 元素的父元素，也是 <div> 的子元素
左侧 <li> 元素是 <span> 的父元素、<ul> 的子元素和 <div> 的后代
<span> 元素是左侧 <li> 的子元素，也是 <ul> 和 <div> 的后代
两个 <li> 元素是兄弟元素（它们共享同一个父元素）
右侧 <li> 元素是 <b> 的父元素、<ul> 的子元素和 <div> 的后代
<b> 元素是右侧 <li> 的子元素，也是 <ul> 和 <div> 的后代
祖先是父母、祖父母、曾祖父母等。
后代是孩子、孙子、曾孙等。
兄弟元素共享同一个父元素。
jQuery 遍历 - 祖先
使用 jQuery，您可以遍历 DOM 树以查找元素的祖先。
祖先是父元素、祖元素、曾祖元素等等。
遍历 DOM 树
用于遍历 DOM 树的三个有用的 jQuery 方法是：
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回所选元素的直接父元素。
此方法仅遍历 DOM 树的单个级别。
以下示例返回每个 <span> 元素的直接父元素：
示例
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回所选元素的所有祖先元素，一直到文档的根元素 (<html>)。
以下示例返回所有 <span> 元素的所有祖先：
示例
$(document).ready(function(){
$("span").parents();
});
您还可以使用可选参数来过滤祖先的搜索。
以下示例返回所有 <span> 元素（即 <ul> 元素）的所有祖先：
示例
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回两个给定参数之间的所有祖先元素。
以下示例返回 <span> 和 <div> 元素之间的所有祖先元素：
示例
$(document).ready(function(){
$("span").parentsUntil("div");
});
总结
本文介绍了jQuery遍历DOM的使用，如有问题欢迎私信和评论
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
