1、查找 find()、parent()、prev()、next()

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

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

例如有如下HTML结构:
  1. <!-- HTML结构 -->
  2. <ul class="lang">
  3. <li class="js dy">JavaScript</li>
  4. <li class="dy">Python</li>
  5. <li id="swift">Swift</li>
  6. <li class="dy">Scheme</li>
  7. <li name="haskell">Haskell</li>
  8. </ul>
8
 
1
  1. <!-- HTML结构 -->
2
  1. <ul class="lang">
3
  1.    <li class="js dy">JavaScript</li>
4
  1.    <li class="dy">Python</li>
5
  1.    <li id="swift">Swift</li>
6
  1.    <li class="dy">Scheme</li>
7
  1.    <li name="haskell">Haskell</li>
8
  1. </ul>

使用find()查找:
  1. var ul = $('ul.lang'); // 获得<ul>
  2. var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
  3. var swf = ul.find('#swift'); // 获得Swift
  4. var hsk = ul.find('[name=haskell]'); // 获得Haskell
4
 
1
  1. var ul = $('ul.lang'); // 获得<ul>
2
  1. var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
3
  1. var swf = ul.find('#swift'); // 获得Swift
4
  1. var hsk = ul.find('[name=haskell]'); // 获得Haskell

如果要从当前节点开始向上查找,使用parent()方法:
  1. var swf = $('#swift'); // 获得Swift
  2. var parent = swf.parent(); // 获得Swift的上层节点<ul>
  3. var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
3
 
1
  1. var swf = $('#swift'); // 获得Swift
2
  1. var parent = swf.parent(); // 获得Swift的上层节点<ul>
3
  1. var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

对于位于同一层级的节点,可以通过next()和prev()方法,例如:
  1. var swift = $('#swift');
  2. swift.next(); // Scheme
  3. swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
  4. swift.prev(); // Python
  5. swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
x
 
1
  1. var swift = $('#swift');
2
  1.  
3
  1. swift.next(); // Scheme
4
  1. swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
5
  1.  
6
  1. swift.prev(); // Python
7
  1. swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点


2、遍历处理:过滤 filter()、map()

2.1 filter()

filter()方法可以过滤掉不符合选择器条件的节点:
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
  2. var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
2
 
1
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2
  1. var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

或者可以传入一个函数,特别注意函数内部的this被绑定为DOM对象,而不是jQuery对象:
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
  2. langs.filter(function () {
  3. return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
  4. }); // 拿到Swift, Scheme
4
 
1
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2
  1. langs.filter(function () {
3
  1.    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
4
  1. }); // 拿到Swift, Scheme

2.1 map()

map()把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的jQuery对象。由于返回值是jQuery封装的数组,使用 get() 来处理返回的对象以得到基础的数组。

在callback函数中,this引用每次迭代的当前DOM元素,而不是jQuery对象,所以如果获取例如value,无法使用诸如val()方法,而要使用 .value 属性来获取。

直白地说,map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象:
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
  2. var arr = langs.map(function () {
  3. return this.innerHTML;
  4. }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']
4
 
1
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2
  1. var arr = langs.map(function () {
3
  1.    return this.innerHTML;
4
  1. }).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

获取的jQuery对象的DOM节点,例如可以通过如此方法直接转换为如所需id的数组,传给后台。
如下,不使用map,我想传递一个id数组:
  1. //通过迭代数据加入到数组中
  2. var studentList = $("#beforeInTable :checked");
  3. var studentsArray = [];
  4. studentList.each(function() {
  5. studentsArray.push($(this).val());
  6. });
6
 
1
  1. //通过迭代数据加入到数组中
2
  1. var studentList = $("#beforeInTable :checked");
3
  1. var studentsArray = [];
4
  1. studentList.each(function() {
5
  1.    studentsArray.push($(this).val());
6
  1. });
如下,使用map,我可以直接获得一个id数组:
  1. var studentsArray = $("#beforeInTable :checked").map(function(){
  2. return this.value;
  3. }).get();
3
 
1
  1. var studentsArray = $("#beforeInTable :checked").map(function(){
2
  1.    return this.value;
3
  1. }).get();

还可以结合Array的 join() 方法,把数组中所有元素放入一个字符串,通过指定的分隔符进行分割:
  1. var studentsArrayStr = $("#beforeInTable :checked").map(function(){
  2. return this.value;
  3. }).get().join(",");
  4. //"82,83"
4
 
1
  1. var studentsArrayStr = $("#beforeInTable :checked").map(function(){
2
  1.    return this.value;
3
  1. }).get().join(",");
4
  1. //"82,83"
这种方式在前后台交互中传递数据会很常用,使用数组或者拼接字符串。


此外,一个jQuery对象如果包含了不止一个DOM节点,first()、last()和slice()方法可以返回一个新的jQuery对象,把不需要的DOM节点去掉:
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
  2. var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
  3. var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
  4. var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致
 
1
  1. var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
2
  1. var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
3
  1. var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
4
  1. var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致


06jQuery-03-选择器查找和过滤的更多相关文章

  1. js查找和过滤

    通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...

  2. jQuery 查找和过滤

    通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...

  3. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  4. 协议栈处理中的conntrack HASH查找/Bloom过滤/CACHE查找/大包与小包/分层处理风格

    1.路由CACHE的优势与劣势 分级存储体系已经存在好多年了.其精髓在于"将最快的存储器最小化.将最慢的存储器最大化",这样的结果就使资源利用率的最大化.既提高了訪问效率,又节省了 ...

  5. web开发 - 从零开始 - 03 - 选择器

    行间样式>id>class>类型选择>通配符 选择器的优先级一致的情况下,后边的样式会覆盖前边的

  6. jQuery选择器(子元素过滤选择器)第七节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. 004 jquery过滤选择器-----------(基本过滤选择器)

    1.介绍 2.常见基本过滤器 3.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  8. 006 jquery过滤选择器-----------(可见性过滤选择器)

    1.介绍 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. 005 jquery过滤选择器-----------(内容过滤选择器)

    1.介绍 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. 2017多校第9场 HDU 6169 Senior PanⅡ 数论,DP,爆搜

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6169 题意:给了区间L,R,求[L,R]区间所有满足其最小质数因子为k的数的和. 解法: 我看了这篇b ...

  2. 【Spring】JDBC事务管理XML配置

    将spring事务管理与spirng-mybatis分离开了: <?xml version="1.0" encoding="UTF-8"?> < ...

  3. 博文Contents<451--到999—>

    积分=排名>2017-05-15这一天还真是厉害了.让我等了5个月时间... 前言:博客中的随笔文章.并非都是笔者的原创文章.有些是听别人说的.有些是书上摘录的.有些是百度的.有些是别人博客的文 ...

  4. [2017-08-28]Abp系列——业务异常与错误码设计及提示语的本地化

    本系列目录:Abp介绍和经验分享-目录 前言 ABP中有个异常UserFriendlyException经常被使用,但是它所在的命名空间是Abp.UI,总觉得和展现层联系过于紧密,在AppServic ...

  5. git 工作流介绍

    GIT Git工作流你可以理解为工作中团队成员遵守的一种代码管理方案,在Git中有以下几种工作流方案作为方案指导: 集中式工作流 功能开发工作流 Gitflow工作流 Forking工作流 下面针对性 ...

  6. 零基础如何一步一步开始搭建高性能直播平台?现以GitChat·架构来进行说明

    前言 现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...

  7. MongoDB副本集模式安装

    设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...

  8. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  9. RAISERROR

    RAISERROR 可以抛出一个错误,并被程序捕获,在存储过程经常使用: 是否进入Catch代码执行区域,在于错误严重等级设置 RAISERROR ('无效数据', 11 , 1) 第一个参数:自定义 ...

  10. 如何将ASP.NET-WebApi发布到IIS6.0上(转)

    关于"如何将ASP.NET-WebApi发布到IIS6.0上"的这方面的学习,一开始项目组长让我们接触的时候,我的心情是这样的 哇呜.jpg 当时真的是一脸懵逼啊,对于刚接触asp ...