什么是遍历?
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
这些 jQuery 方法很有用,它们用于遍历 DOM 树:
<body>
<div>
<ul>
<li><span></span></li>
</ul>
</div>
</body>
parent() 方法返回被选元素的直接父元素
$("span").parent(); //返回元素<li>
parents() 方法返回被选元素的所有祖先元素,直到文档的根元素 (<html>)
$("span").parents(); //返回一个对象,0:<li>,1:<ui>,2:<div>...
$("span").parents("#kk"); //添加参数意为所有祖先元素中id=kk的元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div"); //返回<li>和<ul>,注意不包含<div>
$("span").parentsUntil("div","#kk"); //添加参数意为选中的元素中id=kk的元素
children() 方法返回被选元素的所有直接子元素。
$("div").children(); //可以添加参数过滤
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
$("div").find("*"); //返回 <div> 的所有后代
$("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings() 返回所选元素的所有兄弟元素
- next() 返回所选元素的下一个兄弟元素
- nextAll() 返回所选元素的后面的所有兄弟元素
- nextUntil("目标元素") 返回所选元素到目标元素之间的所有兄弟元素(向后)
- prev() 返回所选元素的上一个兄弟元素
- prevAll() 返回所选元素的前面的所有的兄弟元素
- prevUntil("目标元素") 返回所选元素到目标元素之间的所有兄弟元素(向前)
jQuery 遍历- 过滤
first() 方法返回被选元素的首个元素
$("div p").first(); //返回第一个div下的第一个p元素
last() 方法返回被选元素的最后一个元素
$("div p").last(); //返回最后一个div下的最后一个p元素
eq() 方法返回被选元素中带有指定索引号的元素
$("p").eq(1); //返回所有p元素中的第2个p元素
filter() 方法允许您规定一个标准
$("p").filter(".url"); //返回所有p元素中class=url的元素
not() 方法返回不匹配标准的所有元素
$("p").not(".url"); //返回所有p元素中class != url的元素