jQuery 查找和过滤
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤。
最常见的查找是在某个节点的所有子节点中查找,使用find()
方法,它本身又接收一个任意的选择器。例如如下的HTML结构:
- JavaScript
- Python
- Swift
- Scheme
- Haskell
<!-- 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('.red'); // 获得Swift的上层节点<ul>,同时传入过滤条件。如果ul不符合条件,返回空jQuery对象
对于位于同一层级的节点,可以通过next()
和prev()
方法,例如:
当我们已经拿到Swift
节点后:
var swift = $('#swift'); swift.next(); // Scheme
swift.next('[name=haskell]'); // 空的jQuery对象,因为Swift的下一个元素Scheme不符合条件[name=haskell] swift.prev(); // Python
swift.prev('.dy'); // Python,因为Python同时符合过滤器条件.dy
过滤
和函数式编程的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 查找和过滤的更多相关文章
- js查找和过滤
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...
- 06jQuery-03-选择器查找和过滤
1.查找 find().parent().prev().next() 通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最 ...
- JQuery查找标签
JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
- 基于jQuery查找dom的多种方式性能问题
这个问题的产生由于我们前端组每个人的编码习惯的差异,最主要的还是因为代码的维护性问题.在此基础上,我对jQuery源码(1.11.3)查找dom节点相关的内容进行了仔细的查阅,虽然并不能理解的很深入 ...
- Jquery下控制backgroundPosition位置的问题/jquery查找data id相等的元素
1:想通过控制backgroundPosition 来实现动态效果: $(this).animate({"background-positionY":-13},1); //但是火狐 ...
- jQuery 查找元素1
jQuery 查找元素1 1. id // 通过id查找 $('#id') 2. class <div class='c1'></div> // 通过class查找 $('.c ...
- jQuery 查找元素2
jQuery 查找元素2 :first <ul> <li>list item 1</li> <li>list item 2</li> < ...
- jQuery 查找属性
jQuery 查找属性 示例: <div xsk='123' > <div xsk='456' > // 具有xsk属性的所有标签 $('[xsk]') // xsk属性等于1 ...
随机推荐
- 将python工程部署到新服务器(对virtualenv工具进行环境迁移)
将python工程部署到新服务器(对virtualenv工具进行环境迁移) # 从开发的电脑上导出 pip list 到 requirements.txt 文件pip freeze > requ ...
- kali更新软件源
首先就是修改软件源文件 /etc/apt/sources.list 可以用leafpad打开,在终端中键入: leafpad /etc/apt/sources.list 原码是kali官方的软件源,更 ...
- MNIST机器学习入门(二)
在前一个博客中,我们已经对MNIST 数据集和TensorFlow 中MNIST 数据集的载入有了基本的了解.本节将真正以TensorFlow 为工具,写一个手写体数字识别程序,使用的机器学习方法是S ...
- emmet 配置文件
snippets.json(添加自己的或更新现有的片段) preferences.json(更改某些Emmet过滤器和操作的行为) SyntaxProfiles.json(定义生成的HTML / XM ...
- POI2015 WYC
也许更好的阅读体验 \(\mathcal{Description}\) 给定一张n个点m条边的带权有向图,每条边的边权只可能是1,2,3中的一种.将所有可能的路径按路径长度排序,请输出第k小的路径的长 ...
- Error creating bean with name 'XXX' defined in file
这个错误是我在之前操作时,错将另一个dubbo服务器也加载到了该dubbo服务器上(pom.xml),所以出现了Error creating bean with name 'XXX' defined ...
- MySQL CentOS7 手动安装
手动安装MySQL的目的: 1.一个服务器上可以同时装多个版本,甚至相同版本MySQL的多个实例,这种需求很常见: 2.一次初始化和配置后,可以快速复制到本服务器或其他服务器,及封装为初始MySQL的 ...
- Linux E667 同步失败
在使用Vim编辑/proc目录下的文件后,保存,显示"E667 同步失败" 原因 因为proc这个目录是一个虚拟文件系统,它放置的数据都是在内存中,本身不占有磁盘空间,所以使用Vi ...
- Android为TV端助力之:maxWidth设置无效
android:maxWidth用过几次,之前有效,今天再用就无效了.其实是有两个注意点的,记录下: 1. android:adjustViewBounds="true" 2.an ...
- robotframework Run keyword if ELSE 用法
1.Run keyword if 后面必须跟 关键字 ,可以是你自己的, 也可以是 框架自带的 2.ELSE 必须是大写,