#转载请留言联系
从一个简单的例子引入，jQuery里的each有什么作用？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('#list li').css({'background':"blue"}); console.log($('#list li').html()) }) </script> </head> <body> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
打开网页的效果是，列表的每一项背景色都变成蓝色了，但是终端只能输出列表第一项的值1。这是为什么呢？
原因就是，$('#list li').css({'background':"blue"});这句jQuery代码，里面实际上本质上还是js的循环在完成多个元素的背景修改。
而获取元素时内部没有循环，当我们需要获取列表的元素时，就需要使用循环或者用each关键词了！
1.使用循环。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ for(var i=0;i<$('#list li').length;i++){ console.log($('#list li').eq(i).html()) } }) </script> </head> <body> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html> 终端输出： 1 2 3 4 5
2.使用each关键词
语法：
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) |
必需。为每个匹配元素规定运行的函数。
|
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $('#list li').each(function(i,ele){ console.log($(ele).html()) }) }) </script> </head> <body> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在开发过程中使用$each可以大大的减轻我们的工作量。