filter和find区别

find()会在当前指定元素中查找符合条件的子元素,是对它的子集操作,而filter()则是在当前指定的元素集合中查找符合条件的元素,是对自身集合元素进行筛选

HTML代码:

1
2
3
4
5
6
7
8
<div class="benben">
<p>Hello,World!</p>
<p>Hello,World Again!</p>
<p class="test">Test1</p>
</div>
<div class="test">
<p>Test2</p>
</div>

jQuery代码:

1
2
3
4
5
6
7
8
<script type="text/javascript">
//using find()
var $find=$("div").find(".test");
alert($find.html());//display "Test1"
//using test()
var $filter=$("div").filter(".test");
alert($filter.html());//display "Test2"
</script>

遍历节点

1,.children()获取所有子元素

2,next() 匹配元素后面紧邻的同辈元素

3,prev()匹配元素前面紧邻的同辈元素

4,siblings()取得匹配元素前后所有的同辈元素

请思考这个带有基本的嵌套列表的页面:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

如果我们从第三个项目开始,则可找到该元素的同胞元素:

$('li.third-item').siblings().css('background-color', 'red');

此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式,所有同胞元素很自然地成为了对象的一部分。如果已应用选择器,则只会包含四个列表中的匹配的项目。

原始元素不包含在同胞元素中,当我们打算找到 DOM 树的特定层级上的所有元素时,记住一点很重要。

filter和find区别,元素遍历的更多相关文章

  1. js数组遍历(for in ,for of ,map,foreach,filter)的区别

    一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...

  2. servlet/filter/listener/interceptor区别与联系

    转自:http://www.cnblogs.com/doit8791/p/4209442.html servlet.filter.listener是配置到web.xml中(web.xml 的加载顺序是 ...

  3. Javascript高级编程学习笔记(47)—— 元素遍历

    元素遍历 为了方便我们使用JS来遍历文档中的元素,W3C在原来的基础之上提出了 Element Traversal 规范 这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题. 比如在某些浏览器 ...

  4. 【转】servlet/filter/listener/interceptor区别与联系

    原文:https://www.cnblogs.com/doit8791/p/4209442.html 一.概念: 1.servlet:servlet是一种运行服务器端的java应用程序,具有独立于平台 ...

  5. Java中关于HashMap的元素遍历的顺序问题

    Java中关于HashMap的元素遍历的顺序问题 今天在使用如下的方式遍历HashMap里面的元素时 1 for (Entry<String, String> entry : hashMa ...

  6. ASP.NET Core 中间件 中间件(Middleware)和过滤器(Filter)的区别

    https://www.cnblogs.com/savorboard/p/5586229.html 前言 在上篇文章主要介绍了DotNetCore项目状况,本篇文章是我们在开发自己的项目中实际使用的, ...

  7. 数组filter方法对数组元素进行过滤

    Array.prototype.filter对数组中元素进行过滤 /** * @method reduce * @param {number} item 当前迭代的数组元素 * @param {num ...

  8. [译]聊聊C#中的泛型的使用(新手勿入) Seaching TreeVIew WPF 可编辑树Ztree的使用(包括对后台数据库的增删改查) 字段和属性的区别 C# 遍历Dictionary并修改其中的Value 学习笔记——异步 程序员常说的「哈希表」是个什么鬼?

    [译]聊聊C#中的泛型的使用(新手勿入)   写在前面 今天忙里偷闲在浏览外文的时候看到一篇讲C#中泛型的使用的文章,因此加上本人的理解以及四级没过的英语水平斗胆给大伙进行了翻译,当然在翻译的过程中发 ...

  9. js some和filter用法和区别

    some方法 array1.some(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn,当回调函数返回true或者遍历完所有数组后,some ...

随机推荐

  1. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)人机界面Paintbuffer Overflow怎么办

    当在界面上绘制了太多元素时,点击运行会在左上角弹出对话框提示内容容量不够   在英文版的说明中,点击Visualization Manager就可以进行设置     更多教学视频和资料下载,欢迎关注以 ...

  2. hdu1698 Just a Hook (线段树区间更新 懒惰标记)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. 语言那点事,crt

    C语言标准(不管是ANSI 还是ISO)包含2部分,一部分是语言本身的标准,另一部分是C标准函数库.C标准函数库规定了函数的原型和功能,但是并没限定这些函数要怎么实现.所谓满足标准C规定的C编译器,不 ...

  4. Oracle 存储过程调用返回游标的另一个存储过程。

    一个扩展存储过程调用另一个存储过程,示例: 被调用存储过程:最后会返回一个游标,游标返回一个值.调用这个存储过程的存储过程同样需要获取它. procedure SearchBill --根据到货单号查 ...

  5. HDU 4287 Intelligent IME(map运用)

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4287 Intellig ...

  6. spring学习笔记(六)

    1.配置环绕通知 需要实现的接口为  MethodInterceptor   代码举例 package com.huawei.aop; import org.aopalliance.intercept ...

  7. ST股福音:涨停潮开始! 最全ST摘帽股汇总!

    本周ST股摘帽行情提前预演,ST股上演涨停潮,部分ST股甚至出现连续涨停.云财经在三季报披露之前曾经做过一期ST股摘帽分析,在三季报正式披 露完毕后,以及部分ST公司公布了2015年年报预告,ST股能 ...

  8. systemd 管理python 程序

    [Unit] Description = test-minapp After = network.target [Service] PermissionsStartOnly = true PIDFil ...

  9. CREATE SEQUENCE添加自增序列及NEXT VALUE FOR返回序列号

    From :https://msdn.microsoft.com/zh-cn/library/ff878091.aspx 语法: CREATE SEQUENCE [schema_name . ] se ...

  10. SpringCloud系列九:脱离Eureka使用Ribbon

    1. 回顾 在前文的示例中,是将Ribbon与Eureka配合使用的.但是现实中可能不具备这样的条件,例如一些遗留的微服务,它们可能并没有注册到Eureka Server上, 甚至根本不是使用Spri ...