jQuery each,避免使用js for循环
What is the difference between $.each(selector) and $(selector).each():
http://stackoverflow.com/questions/6611190/what-is-the-difference-between-eachselector-and-selector-each
.each
is an iterator that is used to iterate over only jQuery objects collection while jQuery.each
($.each
) is a general function for iterating over javascript objects and arrays.
jQuery.each(object, [callback])
概述
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
参数
object,[callback]Object,FunctionV1.0
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数。
示例
描述:
例遍数组,同时使用元素索引和内容。
jQuery 代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
描述:
例遍对象,同时使用成员名称和变量内容。
jQuery 代码:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
注意: $.each()
函数会在内部检索并且使用传递集合的 length
属性。 所以,如果集合有一个名为length
的属性 - 比如 {bar: 'foo', length: 10}
- 这个函数可能无法正常工作。
我们可以在$.each()
返回false
来终止迭代。返回非false相当于一个循环中的continue
语句,这意味着,它会立即跳出当前的迭代,转到下一个迭代。
但是如果想让整个函数返回false呢????
checkCarTypes: function(){
var carTypesSelects = $("select[name=ttmSupplierCarTypeId]");
var numReg = (/^([1-9]\d*|[0]{1,1})$/);
var a = true;
carTypesSelects.each(function(index,value){
var price = $(this).parent().siblings().find("input[name=price]").val();
var marketPrice = $(this).parent().siblings().find("input[name=marketPrice]").val();
var floorPrice = $(this).parent().siblings().find("input[name=floorPrice]").val();
if($(this).val() !== "-1"){
if(price==="" || marketPrice==="" || floorPrice==="") {
alert("车型价格必填!");
a = false;
return false;
}else if(numReg.test(price) === false || numReg.test(marketPrice) === false || numReg.test(floorPrice) === false){
alert("车型价格为大于等于0的数字!")
a = false;
return false;
}
}
})
return a;
}
$().each(callback)
概述
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
参数
callbackFunctionV1.0
对于每个匹配的元素所要执行的函数
示例
描述:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:
<img/><img/>
jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
结果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
描述:
如果你想得到 jQuery对象,可以使用 $(this) 函数。
HTML 代码:
<button>Change colors</button>
<span></span>
<div></div>
<div></div> <div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div> <div></div>
<div></div>
jQuery 代码:
$("img").each(function(){
$(this).toggleClass("example");
});
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button>
<span></span>
<div></div>
<div></div> <div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div> <div></div>
<div></div>
jQuery 代码:
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
})
用each而不用for循环。可以避免出现这种问题:
用each而不用for循环。可以避免出现这种问题:
for (var i = 0; i < 5; i++) {
console.log(i)
};
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 100);
}
$.each([4,3,6],function(i,ele){
setTimeout(function () {
//2s之后全部同时输出,三个定时器起始时间一样
console.log(ele);
}, 2000);
})
$.each([4,3,6],function(i,ele){
setTimeout(function () {
//间隔1s输出
console.log(ele);
}, 1000+1000*i);
})
或者点击事件(用闭包来解决,我突然就懂了。。。)
或者点击事件(用闭包来解决,我突然就懂了。。。)
var liList = document.querySelectorAll("#wrapper li");
for(var i = 0; i < liList.length; i++){
(function(num){
liList[num].onclick = function(){
// console.log(this.innerHTML);//这个总不会错的
console.log(num);
}
})(i)
}
用jQuery可以避免那些问题,用index获得索引值。
$("#wrapper li").on("click",function(ele){
console.log($(this).index());
})
jQuery each,避免使用js for循环的更多相关文章
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 各种循环遍历
js 各种循环遍历(表格比较) 遍历方法 能否遍历数组 能否遍历对象 备注 for 能 不能 for in 能(有诸多缺点) 能 为遍历对象而设计的,不适用于遍历数组 forEach 能 不能 bre ...
- 放弃jQuery,使用原生js吧!
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- js for循环的陷阱
☞问题概述 一页面有三个按钮,点击提示相应内容.相应内容已从后台获取,并转化成json数组. var content = ["提示1", "提示2", &quo ...
- javascript: jquery.gomap-1.3.3.js
from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...
- Node.js 事件循环(Event Loop)介绍
Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
- Node.js事件循环
Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...
- JQuery的$和其它JS发生冲突的快速解决方法
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...
- jquery属性的相关js实现方法
有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...
- JS基础——循环很重要
介绍循环之前,首先要说一下同样很重要的if-else结构,switch-case结构 ①if-else结构 if(判断条件) { 条件为true时执行 } else{ 条件为false时执行 } ②i ...
随机推荐
- 查一下 excel中某一列是否有重复
另一列中写入 =IF(COUNTIF(C:C,C1)>1,"有重复","") 其余往下拖拉公式 我在想如果可以有不往下拖的呢? 不过好像筛选中也有类似的选 ...
- “-bash: svn: command not found”
今天升级了Xcode5.界面更加的清爽了,但是在命令行里SVN也失去了作用了. 当我要更新的时候提示:“-bash: svn: command not found” 解决办法: 1:打开Prefere ...
- Delphi VclSkin使用教程
1. TSkinData TSkinData 主要用于美化你的程序, 只要把TSkinData控件放下去,它就能自动美化所有窗体. 属性 Active: 使用或取消对程序的美化. DisableT ...
- cocos2d-x CCEditBox 字符不能显示完全的bug
cocos2d-x CCEditBox 字符不能显示完全的bug (cocos2dx版本 2.2.0)用CCEditBox制作帐号输入框,当输入的内容超过框的宽度时,框里面不会显示当前输入的字符,显示 ...
- 运算符重载 C++ 编程思想
class Integer{ int i; public: Integer(int ii) : i(ii) {} const Integer operator+(const Integer& ...
- multi-catch和try-catch异常处理
multi-catch属于JDK1.7之后出现的,举例如下: class FactoryTest { public static Fruits getInstance(String className ...
- 闲谈Future模式-订蛋糕
一. Future模式简介 Future有道翻译:n. 未来:前途:期货:将来时.我觉得用期货来解释比较合适.举个实际生活中例子来说吧,今天我女朋友过生日,我去蛋糕店准备给女朋友定个大蛋糕,超级大的那 ...
- 离线树状数组 hihocoder 1391 Countries
官方题解: // 离线树状数组 hihocoder 1391 Countries #include <iostream> #include <cstdio> #include ...
- pick定理:面积=内部整数点数+边上整数点数/2-1
//pick定理:面积=内部整数点数+边上整数点数/2-1 // POJ 2954 #include <iostream> #include <cstdio> #include ...
- 凸包稳定性判断:每条边上是否至少有三点 POJ 1228
//凸包稳定性判断:每条边上是否至少有三点 // POJ 1228 #include <iostream> #include <cstdio> #include <cst ...