前端$.each()函数的用法

火山猫

已于 2024-08-24 20:56:36 修改

阅读量1.8k

点赞数 1

分类专栏：前端开发文章标签： javascript js

于 2020-03-29 16:31:38 首次发布

本文链接：https://blog.csdn.net/qq_43320218/article/details/105155820

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中$.each()函数的使用，包括如何遍历数组和JSON对象，以及在遍历DOM元素时的应用。通过示例展示了$.each()在处理数据结构和操作DOM时的常见场景。

摘要由CSDN通过智能技术生成

each遍历数组
data为数组，i为data数组的索引index，也就是元素的位置下标，此时将遍历输出数组里索引和值。

var data = [ "one", "two", "three", "four"];
$.each（data, function(i,value){
	console.log(this) ;    //this指向当前元素，String {"one"}...
    console.log(i) ;         //i表示数组data当前下标
    console.log(value);     //value表示数组遍历的当前元素的值
    console.log(data[i]);       //data[i]=value
});

each遍历json对象
b为json对象，是键值对的形式出现的。

 var b = { one:1, two:2, three:3, four:4};  
 $.each(b, function(key, value) {
 	console.log(this) ;    //this指向当前元素
    console.log(key) ;         //key表示属性名
    console.log(value);     //value表示属性值
    console.log(b[key]);    //b[key]=value        
        });

遍历DOM元素

 $("div").each(
    function(i,item){
    	console.log(item); //item为选中的元素div
        $(item).css("backgroundColor", "red");//给选中元素加红色背景
        $(item).text("执行到"+i+"行");  //给选中元素加文字
        $(item).html("执行到"+i+"行");
        $(item).append("<span>2222</span>");  //在后面append元素
        if(i==1){
        	return false;//当索引为1时，跳出循环
        }              
   })