jquery遍历（父元素、祖先、后代）

weixin_44134816

于 2023-02-17 10:52:34 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_44134816/article/details/129080473

前端专栏收录该内容

81 篇文章

订阅专栏

这篇文章介绍了jQuery中用于处理DOM元素层级关系的方法，包括parent获取直接父元素，parents获取所有祖先元素，parentsUntil指定范围的祖先元素，children获取直接子元素，以及find查找后代元素。这些方法常用于DOM操作和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

parent:被选元素的直接父元素（只会对上一级DOM元素遍历）
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});

parents:被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$(document).ready(function(){
 $("span").parents()
})

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});

children():被选元素的所有直接子元素，只会下一级DOM树进行遍历。
$("document").ready(function(){
 $("div").children()
})
并且可以选定参数对子元素进行过滤
$(document).ready(function(){
  $("div").children("p.1");   //p标签下面的class="1"
});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("document").ready(function(){
 $("div").find("span")   //$("div").find(" * ")  表示返回 <div> 的所有后代：
})