关于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. myql简单语法测试

    删除某一行  delete from name1 where agee=10 limit 1; insert into name1(agee,namee)values(10,'wwww'),(10,' ...

  2. eBay 表结构

    erp_ebay_list 建表语句 CREATE TABLE `erp_ebay_list` ( `id` ) NOT NULL AUTO_INCREMENT COMMENT '自增主键', `na ...

  3. 数据分析处理库Pandas——对象操作

    Series结构 索引 修改 旧数据赋值给新数据,旧数据不变. 对某一数值进行修改,可以选择保留修改前或修改后的数值. 替换索引 修改某一个索引 添加 在数据1后添加数据2,数据1不改变. 添加一个数 ...

  4. YCM的使用

    YCM大概用来做3件事: (1)自动补全 (2)检查语法 (3)跳转到函数定义 然后涉及到两个关键的文件.vimrc 和 .ycm_extra_conf.py 首先需要正确的配置,在.vimrc中写入 ...

  5. 把SmartForm转换成PDF

    摘要:将SmartForm转换为PDF的过程包括3个简单步骤. 调用智能窗体,然后返回OTF数据. 使用“转换”功能模块将OTF数据转换为所需格式. 下载文件 呈现宏“code”时出错:为参数“lan ...

  6. 在庫購買管理(MM)

    ■購買管理■ [購買依頼]ME51N: 登録ME52N: 変更ME53N: 照会 [購買発注]ME21N: 登録ME22N: 変更ME23N: 照会 [見積依頼]ME41: 登録ME42: 変更ME4 ...

  7. Diycode开源项目 SitesListFragment分析

    1.效果预览 1.1.网站列表实际界面 1.2.注意这个界面没有继承SimpleRefreshRecycleFragment 前面的话题和新闻继承了SimpleRefreshRecyclerFragm ...

  8. [bzoj1552][Cerc2007]robotic sort&&[bzoj3506][Cqoi2014]排序机械臂

    非常垃圾的一道平衡树,结果被日了一天.很难受嗷嗷嗷 首先不得不说网上的题解让我这个本来就不熟悉平衡树的彩笔很难受——并不好理解. 还好Sinogi大佬非常的神,一眼就切掉了,而且用更加美妙的解法. 题 ...

  9. BZOJ 3027: [Ceoi2004]Sweet

    容斥 #include<cstdio> using namespace std; int a,b,n,m[15]; long long ans=0,mod=2004; long long ...

  10. 《Cracking the Coding Interview》——第13章：C和C++——题目1

    2014-04-25 19:13 题目:用C++写一个读取文件倒数K行的方法. 解法:因为是要取倒数K行,所以我的思路是一行一行地读.过程中需要保存一个长度为K的链表,每次新读到一行都将表头节点移到表 ...