JQuery的過濾filter()方法

和函數式編程的map、filter類似,jQuery對象也有類似的方法。

filter()方法可以過濾掉不符合選擇器條件的節點:

<ul class="lang">
<li class="js dy">JavaScript</li>
<li class="dy">Python</li>
<li id="swift">Swift</li>
<li class="dy">Scheme</li>
<li name="haskell">Haskell</li>
</ul>


var langs = $('ul.lang li'); // JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // JavaScript, Python, Scheme

或者傳入一個函數,要特別注意函數內部的this被綁定為DOM對象,不是jQuery對象:

var langs = $('ul.lang li'); // JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S開頭的節點
}); // Swift, Scheme

map()方法把一個jQuery對象包含的若干DOM節點轉化為其他對象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

此外,一個jQuery對象如果包含了不止一個DOM節點,first()、last()和slice()方法可以返回一個新的jQuery對象,把不需要的DOM節點去掉:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相當于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相當于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 參數和數組的slice()方法一致
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,367評論 0 2
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,200評論 0 1
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關注...
    前端進階之旅閱讀 16,679評論 18 503
  • 這次周末與往常不一樣,心情格外的迫切,想象著媽媽的開心模樣,飯粒的香味,還有我那恬不知恥的厚臉皮,賴在媽媽的屁股后...
    取悅自己閱讀 418評論 1 0
  • 隨著我們長大,我們開始參加各種飯局,如同學聚會,同事聚會,認識不認識的一起吃飯。但是每一個飯局都值得我們參加嗎? ...
    珊言三語閱讀 247評論 1 0