jQuery find()和closest()的区别用法及代码示例

在查看两者之间的差异之前Array.find()和closest() 方法，让我们简单了解一下这些是什么以及它们的作用。

1.find()方法：该方法用于获取当前匹配元素集中每个元素的所有过滤后的后代。

用法:

$(selector).find('filter-expression')

参数：用于过滤后代搜索的选择器表达式、元素或 jQuery 对象。

返回值：它返回该元素的所有匹配的后代find()方法被调用。此方法会遍历 DOM 一直到最后一个后代。这意味着它会遍历 DOM 的所有级别，例如子级、孙级、曾孙级等。

例子：在下面的代码中,它会找到所有的跨度里面的标签p标记并将其颜色更改为蓝色。

HTML


<!DOCTYPE html>
<head>
    <!-- jQuery library -->
    <script src=
        "https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
     
<p><span>Hello </span>Geeks!</p>
    <div>
         
<p>Hey! <span>How </span>are you</p>
    </div>
     
<p>Hello Geeks</p>
    <script>
        $('p').find('span').css('color', 'blue')
    </script>
</body>
</html>

输出：

2.closest()方法：该方法用于获取所选元素的第一个祖先。祖先可以是父母，grand-parent，great-grandparents等。

用法:

$(selector).closest(filter-expression)

参数：用于过滤祖先搜索的选择器表达式、元素或 jQuery 对象。

Example: 此方法一直遍历到文档的根元素(即 <HTML>)，以找到所选元素的第一个祖先。我们有三层无序列表<ul>标签。调用closest()方法后<li>标签，它返回第一个最接近的 <ul> 标签。

HTML


<!DOCTYPE html>
<head>
    <!-- jQuery library -->
    <script src=
        "https://code.jquery.com/jquery-git.js">
    </script>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <ul>
            <li>three</li>
            <li>four</li>
            <ul>
                <li id="select-Me">five</li>
                <li>six</li>
            </ul>
        </ul>
    </ul>
    <script>
        $("#select-Me")
            .closest("ul")
            .css("color", "blue");
    </script>
</body>
</html>

输出：

find() 和 closest() 之间的区别

find()	closest()
该方法用于获取当前匹配元素集合中每个元素的所有过滤后的后代。	该方法用于获取所选元素的第一个祖先。
此方法会遍历 DOM 一直到最后一个后代。	此方法会遍历 DOM 一直到文档的根元素。
这个方法沿着树向下查找孩子和孩子的孩子。	这种方法会沿着树向上查找父母。
它的语法是-： $(选择器).find(过滤器)	它的语法是-： $(选择器).closest(过滤器)
它将参数作为过滤器表达式	它以参数作为过滤器
用于返回所选元素的后代元素	它返回所选元素的第一个祖先。

相关用法

注：本文由纯净天空筛选整理自hritikrommie大神的英文原创作品 Difference between find() and closest() in jQuery。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。