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. zStack学习笔记(原创,绝对不是抄的……)

    我之前写的文章都没写上面那句,但是这篇写了,主要是因为zStack文章抄袭太严重……故此声明 因为涉及到数据的双向交互问题,所以在这里我考虑使用协议栈来实现数据的收发.首先说下如何在Zstack中添加 ...

  2. react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  3. openerp wizard to tree view

    从wizard跳转到tree视图最简单的方法   <act_window context="{'search_default_server_id': active_id, 'defau ...

  4. 【DB2】NOT IN使用中的大坑

    1.环境准备 ------建表TB DROP TABLE TB; CREATE TABLE TB ( ID INTEGER, LEVEL_DETAIL ) ); INSERT INTO TB (ID, ...

  5. C语言-编译

    编译的时候只是需要知道函数原型(即只需要 xxx.h 文件即可), 不需要知道函数定义, 在链接阶段可以把 xxx.c 生成的 xxx.o 链接进去, 以知道函数定义 编译时,编译器需要的是语法的正确 ...

  6. jetty.xml解析

    我们知道jetty有一种启动方式是在jetty的根目录中运行命令行:java -jar start.jar,这个命令会调用apache的XmlConfiguration工具类作为启动类,这个类会默认读 ...

  7. 高仿快递100--实战之RadioGroup和RadioButton应用

    1.RadioButton和CheckBox的差别: a.单个RadioButton在选中后,通过点击无法变为未选中 单个CheckBox在选中后.通过点击能够变为未选中 b.一组RadioButto ...

  8. 嵌入式实时操作系统Nucleus PLUS综述

    近些年来,随着嵌入式系统飞速的发展.嵌入式实时操作系统广泛地应用在制造工业.过程控制.通讯.仪器仪表.汽车.船舶.航空航天.军事.装备.消费类产 品等方面. Nucleus PLUS 是为实时嵌入式应 ...

  9. DNS的概念,用途,DNS查询的实现算法

    1.DNS的概念,用途      DNS是由解析器以及域名服务器组成的.      域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器.      DNS ...

  10. WIN10系统如何设置系统的护眼色

    小编的眼神不是很好,所以喜欢把电脑的各种文档的背景色设置成护眼色(就是在视觉效果看起来非常舒适的那种淡绿色) 方法/步骤     windows+R键调出运行窗口(或者鼠标右击开始键,选择运行)   ...