jquery each，jQuery中的each()方法有什么作用
这篇文章给大家聊聊关于jquery each，以及jQuery中的each()方法有什么作用对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
jQuery中$.each()函数的用法引申实例
语法：
$.each(
collection,
callback(indexInArray,
valueOfElement)
)
值得一提的是，forEach
可以很方便的遍历数组和
NodeList
，jQuery
中的
jQuery
对象本身已经部署了这类遍历方法，而在原生
JavaScript
中则可以使用
forEach
方法，但是
IE
并不支持，因此我们可以手动把
forEach
方法部署到数组和
NodeList
中:
if
(
!Array.prototype.forEach
){
Array.prototype.forEach
=
function(fn,
scope)
{
for(
var
i
=
0,
len
=
this.length;
i
<
len;
++i)
{
fn.call(scope,
this[i],
i,
this);
}
}
}
//
部署完毕后
IE
也可以使用
forEach
了
document.getElementsByTagName('p').forEach(function(e){
e.className
=
'inner';
});
而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
例1：传入数组
<!DOCTYPE
html>
<html>
<head>
<script
src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each([52,
97],
function(index,
value)
{
alert(index
+
‘:
‘
+
value);
});
</script>
</body>
</html>
输出：
0:
52
1:
97
例2：如果一个映射作为集合使用,回调函数每次传入一个键-值对
<!DOCTYPE
html>
<html>
<head>
<script
src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var
map
=
{
‘flammable':
‘inflammable',
‘duh':
‘no
duh'
};
$.each(map,
function(key,
value)
{
alert(key
+
‘:
‘
+
value);
});
</script>
</body>
</html>
输出：
flammable:
inflammable
duh:
no
duh
例3：回调函数中
return
false时可以退出$.each(),
如果返回一个非false
即会像在for循环中使用continue
一样,
会立即进入下一个遍历
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
color:blue;
}
div#five
{
color:red;
}
</style>
<script
src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<div
id=”one”></div>
<div
id=”two”></div>
<div
id=”three”></div>
<div
id=”four”></div>
<div
id=”five”></div>
<script>
var
arr
=
[
"one",
"two",
"three",
"four",
"five"
];//数组
var
obj
=
{
one:1,
two:2,
three:3,
four:4,
five:5
};
//
对象
jQuery.each(arr,
function()
{
//
this
指定值
$(“#”
+
this).text(“Mine
is
”
+
this
+
“.”);
//
this指向为数组的值,
如one,
two
return
(this
!=
“three”);
//
如果this
=
three
则退出遍历
});
jQuery.each(obj,
function(i,
val)
{
//
i
指向键,
val指定值
$(“#”
+
i).append(document.createTextNode(”
–
”
+
val));
});
</script>
</body>
</html>
输出
：
Mine
is
one.
–
1
Mine
is
two.
–
2
Mine
is
three.
–
3
-
4
-
5
jQuery中的each()方法有什么作用
jQuery中each（）方法的主要作用是循环遍历不同的数据，我们可以通过它来循环来自相同选择器中的多个DOM对象
今天将和大家介绍的是我们jQuery中的each（）函数的用法，它可以允许我们循环遍历不同的数据，比如数组或者对象。jQuery中each（）函数是jQuery中最常用的函数之一，接下来在文章中将为大家详细介绍这一方法的使用。
【推荐课程：jQuery教程】
jQuery中的each（）函数用于循环数据，类似于for each循环。所以我们可以使用它来循环来自相同选择器的多个DOM对象
each()方法
为每个匹配元素规定要运行的函数。
$(selector).each(function(index,element))function(index,element)：为每个匹配元素规定所运行的函数。
index：选择器的 index位置，获取索引值
element：当前的元素（也可使用"this"选择器）
当在each函数内部时，我们可以通过使用this关键字来访问当前元素，但是这个对象不是jQuery对象
$("a").each(function(){
$(this);
})获取循环的当前索引
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
$("li").each(function(i){
console.log(i);
})
})
</script>
</body>结果如下图：
循环数组：
可以使用它来遍历数组并获取索引值和在数组中的位置的值。
<script src="jquery/jquery-1.12.4.js"></script>
<script>
var array=['Chinese','Math','English']
$.each(array,function(index,value){
console.log(index+":"+value);
})
</script>结果如下图：
循环对象：
可以使用它来遍历对象并获取索引值和在对象中的位置的值。
<script src="jquery/jquery-1.12.4.js"></script>
<script>
var obj={
name:"张三",
age:"18",
subject:"English"
};
$.each(obj,function(index,value){
console.log("信息："+index+":"+value);
})
</script>结果如下图：
jquery中.map与each的区别
一、功能不同
1、map：用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。
2、each：为每个匹配元素规定要运行的函数。
二、传递参数不同
1、map：会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。
2、each：会为函数传入两个参数：其一是选择器的 index位置。其二是当前的元素。
三、返回值不同
1、map：返回值将作为结果数组中的一个元素，如果返回值为null或undefined，则不会被添加到结果数组中。
2、each：返回 false可用于及早停止循环。
参考资料来源：百度百科-each
参考资料来源：百度百科-Map
关于jquery each到此分享完毕，希望能帮助到您。