jquery 中 closest和parent用法

最新推荐文章于 2023-08-21 18:09:17 发布

轻松的山岭

最新推荐文章于 2023-08-21 18:09:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/z21102/article/details/51956089

本文通过一个示例展示了jQuery中closest与parent方法的区别。closest方法可以查找最近的匹配祖先元素，而parent方法只查找直接父元素。示例中通过点击事件使列表项背景发生变化，演示了两种方法的不同行为。

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

其实closest和parent方法在jquery中都是遍历的意思，就是从自身的dom开始进行不同方式的查找，parent是从自身查找元素最近父级元素，而closest是从自身查找临近元素。两者的含义不太相同，但有时表现的结果却有相似的地方。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
</style>
</head>
<body>
  <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
  </ul>
<script>
  $( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });
</script>
</body>
</html>

上面的例子中点击每个列表项，该列表项的背景会发生变化。如果将closest换成parent则只有点击到click me时候才会变化。