一、遍历元素
jquery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作,就需要用到遍历
语法一:each方法
$("div").each(function(index,domEle){ //回调函数第一个参数(index)一定是索引号 //回调函数第二个参数(domEle)一定是dom元素 …… })
1、each()方法遍历匹配的每一个元素,主要用于DOM处理。each每一个
2、里面的回调函数有两个参数:index是每个元素的索引号,demEle是每个DOM元素对象
3、所以想要使用jquery方法,需要给这个dom元素转换成jquery对象$(domEle)
语法二:$.each()方法
$.each(object,function(index,element){ //object为需要被遍历的对象 //里面的函数有2个参数:index是每个元素的索引号;element遍历内容 …… })
1、$.each()方法可以用来遍历任何的对象。主要用于数据的处理,比如数组、对象
2、里面的函数有2个参数:index是每个元素的索引号;element遍历内容
二、举例
<body> <div>1</div> <div>2</div> <div>3</div> </body>
1、求和
<script> //加法运算 var sum = 0; $("div").each(function(index, domEle) { sum += parseInt($(domEle).text()); }) console.log(sum); </script>
2、改变样式
<script> //更换样式 var arr = [\'red\', \'green\', \'blue\'] $("div").each(function(index, domEle) {
//需要把dom元素先转换为jquery对象才可以使用jQuery的方法 $(domEle).css("color", arr[index]); }) </script>
3、遍历数组、
<script> //遍历数组 var arr = [\'red\', \'green\', \'blue\'] $.each(arr, function(index, ele) { console.log(index); console.log(ele); }) </script>
4、遍历对象
<script> //遍历数组 $.each({ name: "andy", age: 18 }, function(i, ele) { console.log(i);//输出对象包含的属性 console.log(ele);//输出属性对应的属性值 }) </script>