jQuery零基础入门——（四）查找和过滤

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上&＃xff0c;可能补充了个人的理解和日常遇到的点&＃xff0c;用我的理解表述出来&＃xff0c;主干出处来自廖雪峰老师的技术分享。

通常情况下选择器可以直接定位到我们想要的元素&＃xff0c;但是&＃xff0c;当我们拿到一个jQuery对象后&＃xff0c;还可以以这个对象为基准&＃xff0c;进行查找和过滤。

最常见的查找是在某个节点的所有子节点中查找&＃xff0c;使用find()方法&＃xff0c;它本身又接收一个任意的选择器。例如如下的HTML结构&＃xff1a;

• Javascript
• Python
• Swift
• Scheme
• Haskell



 用find()查找&＃xff1a;

var ul &＃61; $(&＃39;ul.lang&＃39;); // 获得


var dy &＃61; ul.find(&＃39;.dy&＃39;); // 获得Javascript, Python, Scheme
var swf &＃61; ul.find(&＃39;#swift&＃39;); // 获得Swift
var hsk &＃61; ul.find(&＃39;[name&＃61;haskell]&＃39;); // 获得Haskell

如果要从当前节点开始向上查找&＃xff0c;使用parent()方法&＃xff1a;

var swf &＃61; $(&＃39;#swift&＃39;); // 获得Swift
var parent &＃61; swf.parent(); // 获得Swift的上层节点


var a &＃61; swf.parent(&＃39;.red&＃39;); // 获得Swift的上层节点
&＃xff0c;同时传入过滤条件。如果ul不符合条件&＃xff0c;返回空jQuery对象

对于位于同一层级的节点&＃xff0c;可以通过next()和prev()方法&＃xff0c;例如&＃xff1a;

当我们已经拿到Swift节点后&＃xff1a;

var swift &＃61; $(&＃39;#swift&＃39;);swift.next(); // Scheme
swift.next(&＃39;[name&＃61;haskell]&＃39;); // 空的jQuery对象&＃xff0c;因为Swift的下一个元素Scheme不符合条件[name&＃61;haskell]swift.prev(); // Python
swift.prev(&＃39;.dy&＃39;); // Python&＃xff0c;因为Python同时符合过滤器条件.dy

过滤

和函数式编程的map、filter类似&＃xff0c;jQuery对象也有类似的方法。

filter()方法可以过滤掉不符合选择器条件的节点&＃xff1a;

var langs &＃61; $(&＃39;ul.lang li&＃39;); // 拿到Javascript, Python, Swift, Scheme和Haskell
var a &＃61; langs.filter(&＃39;.dy&＃39;); // 拿到Javascript, Python, Scheme

或者传入一个函数&＃xff0c;要特别注意函数内部的this被绑定为DOM对象&＃xff0c;不是jQuery对象&＃xff1a;

var langs &＃61; $(&＃39;ul.lang li&＃39;); // 拿到Javascript, Python, Swift, Scheme和Haskell
langs.filter(function () {return this.innerHTML.indexOf(&＃39;S&＃39;) &＃61;&＃61;&＃61; 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象&＃xff1a;

var langs &＃61; $(&＃39;ul.lang li&＃39;); // 拿到Javascript, Python, Swift, Scheme和Haskell
var arr &＃61; langs.map(function () {return this.innerHTML;
}).get(); // 用get()拿到包含string的Array&＃xff1a;[&＃39;Javascript&＃39;, &＃39;Python&＃39;, &＃39;Swift&＃39;, &＃39;Scheme&＃39;, &＃39;Haskell&＃39;]

此外&＃xff0c;一个jQuery对象如果包含了不止一个DOM节点&＃xff0c;first()、last()和slice()方法可以返回一个新的jQuery对象&＃xff0c;把不需要的DOM节点去掉&＃xff1a;

var langs &＃61; $(&＃39;ul.lang li&＃39;); // 拿到Javascript, Python, Swift, Scheme和Haskell
var js &＃61; langs.first(); // Javascript&＃xff0c;相当于$(&＃39;ul.lang li:first-child&＃39;)
var haskell &＃61; langs.last(); // Haskell, 相当于$(&＃39;ul.lang li:last-child&＃39;)
var sub &＃61; langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致