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 ...
随机推荐
- Kubernetes+Istio
Kubernetes+Istio 微服务.SpringCloud.k8s.Istio杂谈 一.微服务与SOA “微服务”是一个名词,没有这个名词之前也有“微服务”,一个朗朗上口的名词能让大家产 ...
- npm 创建vue项目(指定目录进行创建)
1.先安装node,js和npm 检验mpm 和node的方式是 npm -v / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码 npm ...
- MD5用户密码加密工具类 MD5Util
一般记录用户密码,我们都是通过MD5加密配置的形式.这里记录一下,MD5加密的工具类. package com.mms.utils; import java.security.MessageDiges ...
- java中对对象进行判空的操作--简洁编码
java中对对象进行判空的操作 首先来看一下工具StringUtils的判断方法: 一种是org.apache.commons.lang3包下的: 另一种是org.springframework.ut ...
- LOJ2401 JOISC2017 Dragon2 计算几何、线段树
传送门 先考虑每一个攻击方的龙和被攻击方的龙可以与多少个被攻击方/攻击方的龙匹配. 对于攻击方的龙\(A\)和被攻击方的龙\(B\),在道路为线段\((C,D)\)的情况下,能够与下图位置的所有对应属 ...
- 备份和还原 第三篇:master 数据库的备份和还原
在SQL Server 中,master 数据库记录系统级别的元数据,例如,logon accounts, endpoints, linked servers, and system configur ...
- PHP获取前台传过来的时间年份,进行处理。
在做时间区间用到一个方法,以方便在数据库中用in()的使用,这个是我同事给我的,我先保存好,以后还可以的用到. /*处理起终年月,返回中间的月份以供数据库查询使用 * @param $yearl 起始 ...
- EFCore自动迁移
2019/05/14,EFCore 2.2.4 有两种方式: 使用Migrate()方法 if (DbContext.Database.GetPendingMigrations().Any()) { ...
- FORM表单 onclick()与onsubmit()
FORM表单中onclick().submit()与onsubmit()的问题 最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然 ...
- python爬虫-有道翻译-js加密破解
有道翻译-js加密破解 这是本地爬取的网址:http://fanyi.youdao.com/ 一.分析请求 我们在页面中输入:水果,翻译后的英文就是:fruit.请求携带的参数有很多,先将参数数据保存 ...