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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。