jQuery中间each实施例的方法

$.each()和$(selector).each()很阶段似,但它是不一样的。

前者可用于遍历数组或json对象

后者被设计成遍历jQuery对象

第一个是$.each()对,通常这么用

$.each(arr, function(i, v){
	// do something
})

当中arr也就是集合,也能够是json对象

而回调函数中的i则是数组的下标(在json中则是相应的key)

而v则是arr[i]的值(在json中则是相应的value)

以下来看一个简单的实例:

var json = {name:"zhu", age:10}
var arr = ['a','b','c','d']

$.each(arr, function(i, v){
	alert(i + ":" + v)
});
$.each(json, function(k, v){
	alert(k + ":" + v)
});

这样就完毕了对数组和json的遍历。

当然了,如此遍历用原生的js也是能够轻松做到的

比方遍历上面的json或是arr,仅仅须要:

for(var k in json){
	alert(k + ":" + arr[k])
}

看起来似乎还是js更简洁一些吧~性能上可能也要好一点


以下介绍$(selector).each()。这种方法在js中就不好找到替代品了。

当中$(selector)负责选中一组jQuery元素,而each函数负责遍历它

比方我们想对一组“li”改变其文字颜色

<style>
.red{
	color: red;
}
</style>
<ul>
	<li>Dog</li>
	<li>Cat</li>
	<li>Mouse</li>
</ul>
<input type="button" id="btn">
<script>
	$("#btn").click(function() {
		$("li").each(function() {
			$(this).toggleClass('red');
		});
	});
</script>

只是实际上,jQuery中存在隐式迭代的现象

每当我们调用选择器方法查找dom树里的元素时,事实上就是把找到的dom元素存入一个jQuery对象里的dom数组中,然后再把这个jQuery对象返回。

而所谓隐式迭代也就是当我们调用jQuery方法时(如 toggleClass(..))。jQuery方法会遍历内部 dom数组。并调用每一个dom元素的相应的dom属性或方法完毕操作。

全部click中的函数并不须要使用each,直接$("li").toggleClass('red')也能够


在$(seletor).each(..)中。this被绑定到了当前遍历的DOM对象,如需获得jQuery对象$(this)就能够了

值得需要注意的是,提前退场遍历时,也可以遍历,只需要return false在上面

版权声明:本文博客原创文章,博客,未经同意,不得转载。

原文地址:https://www.cnblogs.com/hrhguanli/p/4614439.html