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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery实现聊天机器人
Feb 08 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中绘制图像的一些函数总结
2014/11/19 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
python通过post提交数据的方法
2015/05/06 Python
Python读写文件方法总结
2015/06/09 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python实现邮件发送功能
2019/08/10 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
土木工程应届生求职信
2013/10/31 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
学校读书活动总结
2014/06/30 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python