jQuery查找和过滤_动力节点节点Java学院整理
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤。
最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身又接收一个任意的选择器。例如如下的HTML结构:
JavaScript Python Swift Scheme Haskell
用find()查找:
varul=$('ul.lang');//获得
-
vardy=ul.find('.dy');//获得JavaScript,Python,Scheme
varswf=ul.find('#swift');//获得Swift
varhsk=ul.find('[name=haskell]');//获得Haskell
如果要从当前节点开始向上查找,使用parent()方法:
varswf=$('#swift');//获得Swift varparent=swf.parent();//获得Swift的上层节点
-
vara=swf.parent('div.red');//从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
对于位于同一层级的节点,可以通过next()和prev()方法,例如:
当我们已经拿到Swift节点后:
varswift=$('#swift'); swift.next();//Scheme swift.next('[name=haskell]');//Haskell,因为Haskell是后续第一个符合选择器条件的节点 swift.prev();//Python swift.prev('.js');//JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
过滤
和函数式编程的map、filter类似,jQuery对象也有类似的方法。
filter()方法可以过滤掉不符合选择器条件的节点:
varlangs=$('ul.langli');//拿到JavaScript,Python,Swift,Scheme和Haskell vara=langs.filter('.dy');//拿到JavaScript,Python,Scheme
或者传入一个函数,要特别注意函数内部的this被绑定为DOM对象,不是jQuery对象:
varlangs=$('ul.langli');//拿到JavaScript,Python,Swift,Scheme和Haskell langs.filter(function(){ returnthis.innerHTML.indexOf('S')===0;//返回S开头的节点 });//拿到Swift,Scheme
map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象:
varlangs=$('ul.langli');//拿到JavaScript,Python,Swift,Scheme和Haskell vararr=langs.map(function(){ returnthis.innerHTML; }).get();//用get()拿到包含string的Array:['JavaScript','Python','Swift','Scheme','Haskell']
此外,一个jQuery对象如果包含了不止一个DOM节点,first()、last()
varlangs=$('ul.langli');//拿到JavaScript,Python,Swift,Scheme和Haskell varjs=langs.first();//JavaScript,相当于$('ul.langli:first-child') varhaskell=langs.last();//Haskell,相当于$('ul.langli:last-child') varsub=langs.slice(2,4);//Swift,Scheme,参数和数组的slice()方法一致
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。