关于each()、find()、filter()遍历节点的操作方法

each语法：

each(fn)  ;

返回值：jQuery

fn：代表对于每个匹配元素所要执行的函数

each（）方法共有三种形式

第一种(不带参数)：

$('img').each(function(){

$(this).toggleClass("example");

});

注意：此时的this代指的是DOM对象而不是jQuery对象

如果想得到jQuery对象，可以使用$(this)函数

第二种（带一个参数）：

$('img').each(function(i){

   this.src="test"+i+"jpg";

});

第三种（带两个参数）：

$('img').each(function(i，element){

this.src="test"+i+"jpg";

// element.src="test"+i+"jpg";

});

概述：以每一个匹配元素作为上下文来执行一个函数

每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）.而且在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合总所处的位置的数字值作为参数（从0开始的整型）。返回‘false’将停止循环（就像在普通的循环中使用‘break’）。返回‘true’跳至下一个循环（就像在普通循环中使用‘continue’）。

最常用的形式是第二种，接下来我们写一个示例

<title>关于each</title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("[type=button]").click(function () {

                var hobby = "";

                $(":checkbox:checked").each(function (i,element) {

                    //$(element).val();

                    hobby += (++i) +"." + $(this).val()+"<br/>";

                });

                $("#hobby").html(hobby);

            });

        });

    </script>

</head>

<body>

    <div>请选择您的爱好</div>

    <ul>

        <li><input  type="checkbox" value="登山" /> 登山</li>

        <li> <input  type="checkbox" value="游泳" /> 游泳</li>

        <li><input  type="checkbox" value="跳高"/> 跳高</li>

        <li><input  type="checkbox" value="弹吉他"/> 弹吉他</li>

        <li><input  type="checkbox" value="小提琴"/> 小提琴</li>

        <li><input  type="checkbox" value="葫芦丝"/> 葫芦丝</li>

    </ul>

    <hr />

    <input  type="button" value="查看我的爱好"/>

    <div id="hobby"></div>

</body>

</html>

查找方法--------------------------------find（）

搜索所有与指定表达式匹配的元素

示例：

$('p').find('span');     //在所有p元素的后代节点中查找span元素

注意：find（）是不允许空参的（即必须要跟一个选择器）

情景：如果我就想拿p标签里的所有后代，那应该怎么办？

解决方案：那就用到了我们之前学习的全局选择器（*）  一般情况不会用到

----------------------------------------filter（）

筛选出与指定表达式匹配的元素集合

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

示例如下：

关于each()、find()、filter()遍历节点的操作方法的更多相关文章

  1. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

  2. jq的遍历节点

    1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...

  3. mysql7笔记----遍历节点所有子节点

    mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...

  4. jaxp的dom方式操作（查找、添加、修改、删除、遍历节点）

    package cn.itcast.jaxptest; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;imp ...

  5. [ActionScript 3.0] as3处理xml的功能和遍历节点

    as3比as2处理xml的功能增强了N倍,获取或遍历节点非常之方便,类似于json对像的处理方式. XML 的一个强大功能是它能够通过文本字符的线性字符串提供复杂的嵌套数据.将数据加载到 XML 对象 ...

  6. jQuery中each()、find()、filter()等节点操作方法

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元 ...

  7. jQuery遍历节点方法汇总

    1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 <p>Hello</p> <div> <span ...

  8. 在Delphi7中JSON遍历节点不支持使用IN处理方法

    相关资料:http://www.cnblogs.com/del/archive/2009/10/23/1588690.html Delphi2007源代码: procedure TForm1.Butt ...

  9. jQuery_DOM学习之------遍历节点

    一.children()方法 例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

随机推荐

  1. HAN模型理解2

    Hierarchical Attention Networks for Document Classification 论文的理解 在论文的摘要中,它提出了论文的两个特点.第一个就是对应文章所有具有的 ...

  2. Kettle资源库配置（数据库资源库和文件资源库）

    一>文件资源库配置 1. 建立文件资源库:点击工具->资源库->连接资源库菜单 使用文件资源库不需要用户名和密码,如果没有资源库可以点击右上角的"+"新建资源库, ...

  3. 7，MongoDB 之 Limit 选取 Skip 跳过 Sort 排序

    我们已经学过MongoDB的 find() 查询功能了,在关系型数据库中的选取(limit),排序(sort) MongoDB中同样有,而且使用起来更是简单 首先我们看下添加几条Document进来 ...

  4. Windows usb设备正在使用中

    每次插上u盘之后,弹出的时候,总是提示正在使用中.后来我发现了技巧, 1.打开任务管理器 2.打开底部的 打开资源监视器 按钮 3.然后点击磁盘 4.再次弹出usb 就可以弹出了.

  5. JsBridge "Uncaught TypeError: Cannot call method 'callHandler' of undefined", source

    h5和原生结合开发app越来越流行.其实就是webview 的js调用native的方法.也就是需要搭建一个桥.这样的桥早就有人搭建好了,那就是jsbridge. git地址: https://git ...

  6. Django的Field（字段）

    字段 1.models.AutoField 自增列 = int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列设置为主键 primary_key=Tr ...

  7. Python的类（一）

    类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且在函数体之外. ...

  8. [转]Android进程间通信--消息机制及IPC机制实现

    Android为了屏蔽进程的概念,利用不同的组件[Activity.Service]来表示进程之间的通信! 组件间通信的核心机制是Intent,通过Intent可以开启一个Activity或Servi ...

  9. 两个category方法相同调用哪个

    Category扩展,它是对一个类进行功能的扩展.在项目的开发过程中,在不断的迭代开发过程中,我们的类也不可避免的要根据需求来增加新的功能,而这个时候很多的人可能会新建一个子类,然后在子类中去增加我们 ...

  10. Redmine部署到Windows Azure

    有幸,今天可以尝试将Redmine部署到Windows Azure中,记下点滴,方便大家查阅 步骤一:Windows Azure中安装Ubuntu VM 遇到的问题,创建VM时会提示云服务.云存储订阅 ...