filter() 方法用於過濾包裝器集中包含的目前元素集。它的使用應該留給需要過濾一組已選擇的元素的任務。例如，下面的程式碼將過濾包裝集中包含的三個 <p></p> 元素。
<p>#
<!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)')。
<p>另一方面，find() 方法可用於進一步尋找目前所選元素的後代。認為 find() 更像是使用封裝在已選擇的元素中的新元素來更新或更改當前的包裝集。例如，下面的程式碼將使用 find() 將包裝集從 <p> 元素變更為兩個 <strong> 元素。
<!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().
<p>要帶走的概念是filter() 只會減少（或過濾）包裝器集中目前選定的元素，而find() 實際上可以建立一組全新的包裝元素。 < /p>
<p><strong>注意： find() 和filter() 都是破壞性方法，可以使用end() 來撤銷，這會將包裝的集合還原為使用find() 或filter() 之前的狀態。
filter() 方法傳遞一個函數可能更有意義，該函數允許您檢查包裝器集中的每個元素的特定值場景。
<p>例如，假設您希望將 HTML 頁面中的所有 <img alt="使用jQuery進行遍歷" > 元素包裝在目前未使用該元素包裝的 <p> 元素中。
<p>您可以建立一個自訂篩選器來完成此任務，或者您可以使用filter() 方法，向其傳遞函數，該函數將確定該元素的父元素是否為<p> 元素，如果否，則在使用<p> 元素包裝集合中剩餘的<img alt="使用jQuery進行遍歷" > 元素之前，從集合中刪除該元素。
<p>在下面的範例中，我選擇HTML 頁面中的每個<img alt="使用jQuery進行遍歷" > 元素，然後向filter() 方法傳遞一個用於迭代每個元素的函數（使用this ) 在包裝器集中，檢查<img alt="使用jQuery進行遍歷" > 元素的父元素是否為<p> 元素。
<!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。這是因為我想從以 <p> 元素作為父元素的集合中刪除 <img alt="使用jQuery進行遍歷" > 元素。如果函數傳回 false，則傳遞給 filter() 方法的函數只會從集合中刪除元素。
<p>重點是，如果您正在處理孤立的情況，請建立自訂過濾器- 例如: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>
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() 實際上會在其篩選中包含目前選定的元素.
<p>
<p></p>
<p>
closest() 一旦找到符合項目就會停止遍歷，而 parents() 會取得所有父級，然後過濾您的選用選擇器。因此，closest() 最多只能傳回一個元素。
next().對於以下遍歷方法，表達式是可選的，但請記住，您可以選擇提供用於過濾的表達式。
children('表達式')next('表達式')nextAll('表達式')parent('表達式')父母（'表達'）prev('表達式')prevAll('表達式')siblings('表達式')closest('表達式')以上是使用jQuery進行遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！
