关于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. #Python编程从入门到实践#第三章笔记

      列表简介 ​​​1.什么是列表 列表:由一系列按也顶顺序排列的元素组成.元素之间可以没有任何关系. 列表:用方括号[]表示,并用逗号分隔其中元素.名称一般为复数 2.访问元素 (1)列表是有序集合 ...

  2. Android面试收集录1 Activity+Service

    1.Activity的生命周期 1.1.首先查看一下Activity生命周期经典图片. 在正常情况下,一个Activity从启动到结束会以如下顺序经历整个生命周期: onCreate()->on ...

  3. Android 浮动按钮+上滑隐藏按钮+下滑显示按钮

    1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...

  4. PHP.25-TP框架商城应用实例-后台2-商品列表页-搜索、翻页、排序

    商品列表页 1.翻页 控制器GoodsController.class.php添加方法lst(),显示列表页 在商品模型GoodsModel.class.php类中添加search方法 /** *实现 ...

  5. Android getLocationInWindow

    参考博客: http://blog.sina.com.cn/s/blog_44d19b500102vpve.html 这篇博客,我看了三遍,终于看懂了.恩,我就喜欢这样不放弃的自己. 1.getLoc ...

  6. bootstrap设计进度条和圆点

    1.设计进度条.文字前面的圆点和图片 2.思路: (1)设计进度条 (a) 进度条有滚动效果,要加上类.active (b)进度条的颜色通过类.progress-bar-success来写,可以写成. ...

  7. Lua语言中文手册 转载自网络

    Programming in LuaCopyright ® 2005, Translation Team, www.luachina.net Programming in LuaProgramming ...

  8. Linux编译安装与配置-MySQL（5.5，5.6）版本系（笔记）

    MySQL 5.5(5.6)后版本,需要使用cmake(Cross make , https://cmake.org/ )编译 我的环境如下: VMWare虚拟机,CentOS 5.5 x86_64( ...

  9. appium+python的APP自动化（2）

    上节说到安卓上的测试环境都安装好了,这个时候要安装python了 1python的安装 https://www.python.org/15官网下载python2.7(3.0以上也行,个人爱好),安装也 ...

  10. Mac 电脑鼠标和触摸板滚动方向不一致的问题【已解决】

    当我们使用鼠标连接到 MacBook 时,会发现无论怎么设置,鼠标和触摸板的滚动方向都是相反的,导致不能同时使用鼠标和触摸板 解决方法: 我安装了下面的程序,它只允许您反转鼠标的滚动行为: Scrol ...