深入理解jQuery.closest方法

小蓝 • 2024-12-30 16:09 • 编程

一、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方法应用于各种场景，为我们的前端开发工作带来更多的便利。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301823.html