jQuery查找和过滤_动力节点节点Java学院整理


Posted in jQuery onJuly 04, 2017

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

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

<!-- HTML结构 -->
<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>

find()查找:

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

如果要从当前节点开始向上查找,使用parent()方法:

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

对于位于同一层级的节点,可以通过next()prev()方法,例如:
当我们已经拿到Swift节点后:

var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点

过滤

和函数式编程的map、filter类似,jQuery对象也有类似的方法。
filter()方法可以过滤掉不符合选择器条件的节点:

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()方法一致

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
You might like
PHP 面向对象详解
2012/09/13 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue数据初始化initState的实例详解
2019/04/11 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python实现代码块儿折叠
2020/04/15 Python
基于keras中的回调函数用法说明
2020/06/17 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
企业法人授权委托书
2014/04/03 职场文书
销售口号大全
2014/06/11 职场文书
七一党日活动总结
2014/07/08 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
副总经理岗位职责
2015/02/02 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL