深入理解jQuery.closest方法

发布时间：2023-05-18

一、closest方法介绍

jQuery.closest方法是jQuery库中的一种方法，作用是返回与指定的选择器或jQuery对象最近的祖先元素。 该方法接受一个选择器或jQuery对象作为参数，因此可用在以下两种情况：

  1. 通过选择器查找最近祖先元素；
  2. 通过已有的jQuery对象查找最近祖先元素。
$(selector).closest(filter)

二、closest用法详解

closest方法有许多用法，包括：

1、查找最近的祖先元素

当我们想要查找一个元素的最近的祖先元素时，可以使用closest方法。例如：

$(this).closest('div')

上述代码就是找到当前元素最近的祖先div元素。 当然，我们也可以传入一个jQuery对象来作为closest方法的参数：

var $parent = $('li').closest('#parent');

上述代码就是找到li元素最近的id为parent的祖先元素。

2、查找最近的祖先元素（多个条件）

有时，我们需要在一个元素的祖先元素中查找符合多个条件的元素。这时，可以利用closest方法接收多个选择器的特性来实现：

$(this).closest('div, span')

上述代码会返回离当前元素最近的div或span元素。

3、查找最近的祖先元素（使用过滤函数）

除了选择器之外，closest方法还可以接受一个过滤函数作为参数来对祖先元素进行过滤：

$(this).closest(function() {
    return $(this).is('div') && $(this).hasClass('container');
});

上述代码会返回当前元素的最近的class包含container的div元素。

三、closest实践案例

1、动态展开树形结构

在树形结构中，我们想要实现动态展开子节点的功能，可以利用closest方法来找到需要展开的元素的祖先节点。

$('body').on('click', '.expand-btn', function(){
    var $btn = $(this),
        $parentLI = $btn.closest('li'),
        $childUL = $parentLI.find('ul');
    $btn.toggleClass('active');
    $childUL.slideToggle();
});

上述代码为一个简单的树形结构的展开/折叠功能，当用户点击折叠按钮时，需要找到当前元素最近的li元素，然后根据该li元素查找其下的ul元素。

2、表单交互验证

表单验证时，我们需要在用户填写完相应的表单项后，实时对填写内容进行验证。可以利用closest方法来查找与当前表单项最近的表单元素，然后进行验证操作。

$('form').on('keydown', 'input', function(){
    var $input = $(this),
        $closestForm = $input.closest('form');
    if($closestForm && $closestForm.length > 0) {
        validateInput($input);
    }
});

上述代码为一个简单的表单验证方法，当用户在表单中输入内容时，需要找到与其最近的form元素来进行验证操作。

结语

通过本文对jQuery.closest方法的介绍及其实际应用，相信大家对该方法已经有了更深入的了解。 我们可以将closest方法应用于各种场景，为我们的前端开发工作带来更多的便利。

推荐文章