jquery each()方法的使用

最新推荐文章于 2021-06-13 23:39:08 发布

学习代表未来

最新推荐文章于 2021-06-13 23:39:08 发布

阅读量634

点赞数

分类专栏： jquery 文章标签： jquery each

本文链接：https://blog.csdn.net/weixin_39907729/article/details/81531010

版权

jquery 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

1.直接遍历数组

<body>
<table>
	<thead>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>zhangsan</td>
			<td class="age"></td>
		</tr>
		<tr>
			<td>lisi</td>
			<td class="age"></td>
		</tr>
	</tbody>
</table>
</body>

<script>
	
  var data=[{  	
  	name:'zhangsan',  	
  	age:'20'
  },{  	
  	name:'lisi', 	
  	age:'10'
  }];

  var age=$(".age");
  
  $.each(data,function(index,item){
    // 获取每个对象的属性
      console.log($(item)[0].age) //20  10

      console.log(data[index].age) //20  10

    $.each(data,function(index,item){
	  // 实现数组的赋值
	  age[index].innerHTML=data[index].age;
    })

  })

</script>

2.遍历dom元素

<ul>
	<li class="active">1</li>
	<li>2</li>
	<li>1</li>
	<li>2</li>
</ul>


<script>

    var pageColor=['#fdbc0d','#01cecb','#0287fe','#fe7293'];

	$("li").each(function(index,item){

		if($(item).hasClass("active")){	
				
			$(this).css("color",pageColor[index])

			$(this).siblings("li").css("color","#FA8072")
					
		}
      
    })
// 操作item 的总结

// 两个值相等 获取的都是dom元素
console.log(item==$(item)[0]);  // true
				
// 给元素设置样式
console.log($(item).css("color","red"));
console.log($(this).css("color","green"));
				
// 获取元素的类名、id
console.log($(item)[0].className);


</script>