【从0到1学jQuery】jQuery中each()和$.each()的使用
引子:
最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作。所以就查看了jQuery关于这个函数的文档,并且总结一下。
演示代码如下:
<div>
<ul>
<li>你是第1个</li>
<li>你是第2个</li>
<li>你是第3个</li>
<li>你是第4个</li>
<li>你是第5个</li>
</ul>
</div>
需要的结果就是遍历整个li标签元素,当循环到“你是第2个”的时候continue执行到“你是第4个”标签的时候break;
1.$(selector).each()函数的使用
函数定义:
.each( function(index, Element) )
function(index, Element)
类型: Function()
为每个匹配元素执行的一个函数。
$(function() {
$('li').each(function(index) {
var innerText = $(this).text();
if (innerText == '你是第2个') {
//跳过本次循环,相当于continue
return;
} else if (innerText == '你是第4个') {
//退出循环,相当于break;
return false;
}
console.log(innerText);
});
})
执行结果:
在函数体内部我们使用$(this)获取的是当前遍历到元素的jQuery对象,同样我们可以通过使用this获取普通的js对象。
看下面我们将断点打到函数的入口处,观察$(this)和this的输出:
2.$.each()函数的使用
$.each() 一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
函数定义:
jQuery.each(array, callback )或者jQuery.each(object, callback )
array
类型: Array
遍历的数组。
object
类型: Object
遍历的对象。
callback
类型: Function( Integer indexInArray, Object value )
该函数会在每个对象上(迭代)调用。
执行代码:
$(function() {
$.each($('li'), function(index, elem) {
// console.log(index);
// console.log(elem);
var innerText =elem.innerText;
if (innerText == '你是第3个') {
return;
} else if (innerText == '你是第5个') {
return false;
}
console.log(innerText);
})
})
结果:
深入研究:
由上面的代码回调函数function(index, elem) 我们知道,其中的当遍历的是数组的时候index和elem分别是索引和索引值。
那么当我们遍历的是一个对象的时候呢?
看示例:
var testObject={
name:'zhiqiang',
age:'23',
home:'haidian'
}
$(function(){
$.each(testObject,function(keyObj,valueObj){
console.log(keyObj,valueObj);
})
})
可以看到输出的结果是:
这里我们可以知道当$.each()函数去遍历一个对象的时候,这个时候回调函数的argument[0],argument[1]分别是对象的key和value。
【从0到1学jQuery】jQuery中each()和$.each()的使用的更多相关文章
- 跟我一起学写jQuery插件开发方法(转载)
jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很 ...
- 学写jQuery插件开发方法
jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很多公 ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- jQuery Mobile (中)
jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
随机推荐
- usb_ctrl
IFCLK应该是clkout,与数据同步 flagd就是就是slcs FPGA的系统时钟用FX2LP的clkout时钟,个人觉得关键点在时钟是48M,别的异步时钟也是可以的. 模式配置 使用的模式是从 ...
- Nios内部RAM固化配置
选择BSP Editor->Settings ->Advanced->hal->linker,然后勾选allow_code_at_reset.当然如果勾选enable_alt_ ...
- Codeforces Round#413 Div.2
A. Carrot Cakes 题面 In some game by Playrix it takes t minutes for an oven to bake k carrot cakes, al ...
- c 语言申明头文件和实现分开简单例子
很多时候,看到很多c函数的声明和实现是分开的.声明放在头文件,实现却放在另一个文件,最后函数被其他文件调用. 下面以简单例子说明. 一.声明部分 /* test.h */ #include <s ...
- C#-VS异常处理
VS异常处理 常规 try 可能会产生异常的代码,当一行产生异常,这行下面的代码不执行,转到catch开始执行 catch(system.Exception e) e.message ...
- 20169207《Linux内核原理与分析》第九周作业
第九周的实验依旧和往常的一样,主要包括两部分.一是1.阅读学习教材「Linux内核设计与实现 (Linux Kernel Development)」第教材第13,14章.二是学习MOOC「Linux内 ...
- [ X.XX]CF每日一题系列线下更新中
现在做的都好水啊,就不写博客了,线下有记录滴
- Cerebro_变量名搜索插件
Cerebro 安装 兼容环境:Windows, MacOS, Linux 插件依赖于 Cerebro,下载地址: https://github.com/KELiON/cerebro/releases ...
- Golang Email
Backup Code I dont have chinese inputmethod now ( what the fuck about Linux KDE envirnment !) , so j ...
- 验证FluentValidation
FluentValidation https://www.xcode.me/code/fluentvalidation-dot-net-library 这里写得很详细了