关于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. Linux(CentOS6.5 x64)下版本安装及升级kangle+EasyPanel

    说明:(easypanel集成了kangle web 服务器和mysql,仅支持centos 5和centos 6) .执行下面的命令即可,安装程序将自动安装或者升级: yum -y install  ...

  2. Scala构建元数据

    反射方式构建元数据: 通过反射来获取RDD中的Schema信息.这种方式适合于列名(元数据)已知的情况下 步骤: 1.SparkConf配置环境 2.SparkContext初始化上下文 3.SQLC ...

  3. python-含参函数

    #!/usr/local/bin/python3 # -*- coding:utf-8 -*- ''' #----------函数位置参数和关键字参数---------- def test(x,y): ...

  4. Requests库：python实现的简单易用的http库

    1.get请求: get(url, params, headers) 2.json 解析 3.content 获取二进制内容 4.headers 添加 5.post请求:post(url,data,h ...

  5. POJ：3061-Subsequence(尺取法模板详解)

    Subsequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18795 Accepted: 8043 Descript ...

  6. python-11多线程

    1-多任务可以由多进程完成,也可以由一个进程内的多线程完成. 1.1多线程代码示例 import time, threading def loop(): print("thread %s i ...

  7. luogu4196 [CQOI2006]凸多边形 半平面交

    据说pkusc出了好几年半平面交了,我也来水一发 ref #include <algorithm> #include <iostream> #include <cstdi ...

  8. 通过重写ViewGroup学习onMeasure()和onLayout()方法

    在继承ViewGroup类时,需要重写两个方法,分别是onMeasure和onLayout. 1,在方法onMeasure中调用setMeasuredDimension方法 void android. ...

  9. 剑指Offer - 九度1505 - 两个链表的第一个公共结点

    剑指Offer - 九度1505 - 两个链表的第一个公共结点2013-11-24 20:09 题目描述: 输入两个链表,找出它们的第一个公共结点. 输入: 输入可能包含多个测试样例.对于每个测试案例 ...

  10. 《Cracking the Coding Interview》——第18章：难题——题目8

    2014-04-29 03:10 题目:给定一个长字符串S和一个词典T,进行多模式匹配,统计S中T单词出现的总个数. 解法:这是要考察面试者能不能写个AC自动机吗?对面试题来说太难了吧?我不会,所以只 ...