jQuery中closest()函数用法实例

closest()函数介绍

closest()函数是jQuery中的一个重要的DOM遍历方法，用来查找符合指定选择器的最近祖先元素。若没有找到符合选择器的祖先元素，则返回一个空的jQuery对象。

closest()函数语法

closest()函数的语法如下：

$(selector).closest(filter)

closest()函数参数

closest()函数支持一个参数：

• filter: 选择器。如果指定了选择器参数，则closest()方法只返回符合该选择器条件的元素。

closest()函数示例

示例一

以下是一个简单的HTML结构：

<div>
  <ul>
    <li>
      <a href="#">Link 1</a>
    </li>
    <li class="active">
      <a href="#">Link 2</a>
      <ul>
        <li><a href="#">Sub Link 1</a></li>
        <li><a href="#">Sub Link 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Link 3</a>
    </li>
    <li>
      <a href="#">Link 4</a>
    </li>
  </ul>
</div>

现在，我们想要获取 li.active 元素的最近祖先元素是什么。

var ancestor = $('li.active').closest('div');
console.log(ancestor);

输出结果：

[<div>​…​</div>​]

示例二

以下是一个更复杂的HTML结构：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </div>
</div>

现在，我们想要获取 h1 元素的父元素的所有祖先元素。

var ancestors = $('h1').parents();
console.log(ancestors);

输出结果：

[<div class="jumbotron">​…​</div>​, <div class="col-md-6">​…​</div>, <div class="row">​…​</div>, <div class="container">​…​</div>​, document]

结语

closest()函数是一个非常有用的DOM遍历方法，可以帮助我们快速找到符合条件的最近祖先元素。希望这篇攻略对你有所帮助。