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)-人机界面快速入门 TC2

    创建最简单的静态文本,就像是label,就只需要绘制一个矩形框,然后填写Text,取消边框即可(你也可以设置自定义字体)   创建动态的文本框,就像是textbox,需要设置这个矩形框的Text为%d ...

  2. B3:状态模式 State

    当一个对象内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决当控制一个对象状态转换条件表达式过于复杂时的情况,把状态判断逻辑移到表示不同状态的一系列类中.如果状态判断很简单, ...

  3. iOS怎样找到自己的沙盒

    iOS怎样找到自己的沙盒 在ios开发我们会用到沙盒,因为自己对沙盒理解的不够,所以找不到沙盒文件在哪里,当然要知道路径了 比如我的路径 NSString* cachepath = [NSHomeDi ...

  4. 在对方电脑建立IPC连接, 利用IPC$入侵 运行木马

    第一大步:  IPC漏洞的建立 1)在目标主机上设置组策略:開始->执行-〉gpedit.msc 2)计算机配置->windows配置-〉本地策略-〉安全选项 3)在安全选项中, 将网络訪 ...

  5. Java 通过JDBC连接Mysql数据库的方法和实例

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  6. IE 页面不正常显示 错误脚本不报错 脚本调试相关

    在开发时,有时自己做的页面上的JS有错误,但是IE浏览器并不报错,这个时候有可能是因为脚本调试被禁止了. 在Internet选项的高级里面有 两个禁止脚本调试选项,把他们去掉就行.

  7. 获取取并下载tuku的漫画的爬虫

    代码地址如下:http://www.demodashi.com/demo/12842.html 概述 一个简单的爬虫,实现是爬取tuku网站的漫画.并下载到脚本的文件夹中,下载的漫画按照章节名放在各自 ...

  8. PHP-深入理解Opcode缓存

    1.什么是opcode缓存? 当解释器完成对脚本代码的分析后,便将它们生成可以直接运行的中间代码,也称为操作码(Operate Code,opcode).Opcode cache的目地是避免重复编译, ...

  9. MATLAB 的字符串分析

    MATLAB的字符串分析. 字符串实际上是指1Xn 的字符数组. MATLAB软件具有强大的字符串处理功能,提供了很多的字符或字符串处理函数,包括字符串的创建.字符串的属性.比较.查找以及字符串的转换 ...

  10. Azure Storage Blob Go SDK示例

    简介 前面一篇博客介绍了关于Azure ManagerAPI Go SDK的使用,本篇继续介绍使用Blob Go SDK 操作中国区Azure Blob. SDK下载: go get github.c ...