2022-06-18 jQuery遍历方法:$.each()方法遍历对象或数组的示例

前端OnTheRun

已于 2022-10-06 18:04:36 修改

阅读量575

点赞数

分类专栏：知识点文章标签： javascript 遍历循环 jquery

于 2022-06-18 18:01:50 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125349997

版权

知识点专栏收录该内容

90 篇文章

订阅专栏

本文详细介绍了jQuery的$.each()方法，包括如何遍历对象的属性和数组的元素，通过示例代码展示了具体用法，帮助理解$.each()在遍历过程中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0.定义&语法

jQuery.each()函数用于遍历对象或数组方法

$.each( object, callback )//对象或数组,回调

1.遍历对象属性

代码

var user = {
    name: "张三",
    age: 18
};
$.each(user, (key, val) => {
    console.log("属性名:" + key + ",属性值:" + val);
})

结果

属性名:name,属性值:张三
属性名:age,属性值:18

2.遍历数组,显示关键字和数值

代码

<div id="aaa"></div>
<div id="bbb"></div>
<div id="ccc"></div>
<div id="ddd"></div>
<div id="eee"></div>
<script>
    var arr = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
    var obj = {"冠军": 1,"亚军": 2, "季军": 3,"鼓励奖": 4,"参与奖": 5
    };
    jQuery.each(arr, function(idx, val) {
        $(`#${val}`).text("hello,我是"); //此处的val就是arr[0]`arr[4]
        // console.log(idx); //0 1 2
        return idx != 2; //为前三个div添加文本信息
    });
    $.each(obj, function(key, val) {
        // console.log(key);//冠军 亚军..
        // console.log(val);//1 2 3 4 5
        $("div").eq(val - 1).append(document.createTextNode(key));//文本追加
    });
</script>