首頁 > 文章 > web前端 > 使用jQuery進行遍歷

使用jQuery進行遍歷

PHPz原創: 2023-09-02 11:37:03831瀏覽

find() 和 filter() 方法之間的差異

filter() 方法用於過濾包裝器集中包含的目前元素集。它的使用應該留給需要過濾一組已選擇的元素的任務。例如，下面的程式碼將過濾包裝集中包含的三個  元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {  // Alerts middle, by filtering out the first
      // and last <p> elements in the wrapper set.
      alert($('p').filter(':not(:first):not(:last)').text());
  })(jQuery); </script>
</body>
</html>

注意：當使用 filter() 時，總是問自己是否絕對有必要。例如， $('p').filter(':not(:first):not(:last)') 可以不寫filter()$('p:not (:first) :not(:last)')。

另一方面，find() 方法可用於進一步尋找目前所選元素的後代。認為 find() 更像是使用封裝在已選擇的元素中的新元素來更新或更改當前的包裝集。例如，下面的程式碼將使用 find() 將包裝集從  元素變更為兩個  元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <p><strong>first</strong></p>
    <p>middle</p>
    <p><strong>last</strong></p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "strong"
      alert($('p').find('strong').get(0).nodeName);
  })(jQuery); </script>
</body>
</html>

注意：實際上，您可以使用andSelf() 將使用find() 方法之前的包裝器中的元素與目前元素組合起來- 例如$('p').find('strong').andSelf().

要帶走的概念是filter() 只會減少（或過濾）包裝器集中目前選定的元素，而find() 實際上可以建立一組全新的包裝元素。

注意： find() 和filter() 都是破壞性方法，可以使用end() 來撤銷，這會將包裝的集合還原為使用find() 或filter() 之前的狀態。

向 filter() 傳遞函數而不是表達式

在運行並建立用於選擇元素的自訂過濾器之前，簡單地向遍歷filter() 方法傳遞一個函數可能更有意義，該函數允許您檢查包裝器集中的每個元素的特定值場景。

例如，假設您希望將 HTML 頁面中的所有 <img alt="使用jQuery進行遍歷" > 元素包裝在目前未使用該元素包裝的  元素中。

您可以建立一個自訂篩選器來完成此任務，或者您可以使用filter() 方法，向其傳遞函數，該函數將確定該元素的父元素是否為 元素，如果否，則在使用 元素包裝集合中剩餘的<img alt="使用jQuery進行遍歷" > 元素之前，從集合中刪除該元素。

在下面的範例中，我選擇HTML 頁面中的每個<img alt="使用jQuery進行遍歷" > 元素，然後向filter() 方法傳遞一個用於迭代每個元素的函數（使用this ) 在包裝器集中，檢查<img alt="使用jQuery進行遍歷" > 元素的父元素是否為 元素。

<!DOCTYPE html>
<html lang="en">
<body>
    <img>
    <img>
    <p>
        <img>
    </p>
    <img>
    <p>
        <img>
    </p>
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      $('img').attr('src', 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif').filter(function () { return !$(this).parent('p').length == 1 }).wrap('<p></p>');
  })(jQuery); </script>
</body>
</html>

請注意，我正在使用 ! 運算子將布林值 true 更改為 false。這是因為我想從以  元素作為父元素的集合中刪除 <img alt="使用jQuery進行遍歷" > 元素。如果函數傳回 false，則傳遞給 filter() 方法的函數只會從集合中刪除元素。

重點是，如果您正在處理孤立的情況，請建立自訂過濾器- 例如:findImgWithNoP - 對於單一情況可以透過簡單地向filter方法傳遞一個可以進行自訂過濾的函數來避免。這個概念非常強大。考慮一下當我們將正規表示式測試與 filter() 方法結合使用時可能會發生什麼。

<!DOCTYPE html>
<html lang="en">
<body>
    <ul>
        <li>jQuery is great.</li>
        <li>It's lightweight.</li>
        <li>Its free!</li>
        <li>jQuery makes everything simple.</li>
    </ul>
    <script src="https://img.php.cn/"></script>
    <script>  (function($){ 
      // Wrap a <strong> element around any text within
      // a <li> that contains the pattern "jQuery"
      var pattern = /jQuery/i;
      $('ul li').filter(function () { return pattern.test($(this).text()); }).wrap('<strong></strong>');
  })(jQuery); </script>
</body>
</html>

向上遍歷 DOM

您可以使用 parent()、parents() 和 closest() 方法輕鬆遍歷 DOM 到祖先元素。了解這些方法之間的差異至關重要。檢查下面的程式碼並確保您了解這些 jQuery 遍歷方法之間的差異。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="parent2">
        <div id="parent1">
            <div id="parent0">
                <div id="start"></div>
            </div>
        </div>
    </div>
 
    <script src="https://img.php.cn/"></script>
    <script>  (function ($) {
      // Alerts "parent0" x4
      alert($('#start').parent().attr('id'));
      alert($('#start').parents('#parent0').attr('id'));
      alert($('#start').parents()[0].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent0').attr('id'));
      // Alerts "parent1" x4
      alert($('#start').parent().parent().attr('id'));
      alert($('#start').parents('#parent1').attr('id'));
      alert($('#start').parents()[1].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent1').attr('id'));
      // Alerts "parent2" x4
      alert($('#start').parent().parent().parent().attr('id'));
      alert($('#start').parents('#parent2').attr('id'));
      alert($('#start').parents()[2].id);
      // Gets actual DOM element
      alert($('#start').closest('#parent2').attr('id'));
  })(jQuery); </script>
</body>
</html>

注意： closest() 和parents() 可能看起來有相同的功能，但closest() 實際上會在其篩選中包含目前選定的元素.

closest() 一旦找到符合項目就會停止遍歷，而 parents() 會取得所有父級，然後過濾您的選用選擇器。因此，closest() 最多只能傳回一個元素。

遍歷方法接受 CSS 表達式作為可選參數

CSS 表達式不僅可以傳遞給 jQuery 函數來選擇元素，還可以傳遞給多個遍歷方法。可能很容易忘記這一點，因為許多遍歷方法的功能根本不需要使用任何表達式- 例如next().對於以下遍歷方法，表達式是可選的，但請記住，您可以選擇提供用於過濾的表達式。

children('表達式')
next('表達式')
nextAll('表達式')
parent('表達式')
父母（'表達'）
prev('表達式')
prevAll('表達式')
siblings('表達式')
closest('表達式')

以上是使用jQuery進行遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：起步：了解WordPress自訂器JavaScript API下一篇：起步：了解WordPress自訂器JavaScript API

看更多