jquery中$.each()与$().each()使用实例

最新推荐文章于 2025-06-27 10:44:03 发布

芝麻开门2015

最新推荐文章于 2025-06-27 10:44:03 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/resilient/article/details/83143460

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了jQuery中$.each()函数的使用方法，包括对数组、对象和DOM元素的遍历。通过实例展示了如何利用$.each()进行数据处理和DOM操作，是前端开发者掌握jQuery迭代技巧的实用指南。

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

1.在对数组操作的时候$.each()用的比较多

//[{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}]是数组对象

$.each([{name:"xym",email:"123456@qq.com"},{name:"zhima",email:"hill@qq.com"}],function(i,n)
{
    alert("索引:"+i+"对应值为："+n.name);//其中表示索引,n表示对象;
});

输出 0 xym 1 zhima

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(index){//index表示索引
   // alert(this); //输出 one two three four five
    alert(index); //输出0  1 2 3 4
    alert(arr1[index]);//输出 one two three four five

});

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
    alert(item[2]);//输出3 6 9
   // alert(item[i]);//item表示数组 i 表示索引 输出1 5 9
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    hi();
    function hi() {
        var obj = {one: 1, two: 2, three: 3, four: 4, five: 5};
        $.each(obj, function (key, val) {
            alert(obj[key]);
        })
    }

</script>

输出 1 2 3 4 5 相当于循环输出属性的值

function add(a,b){
alert(a+b);}

function sub(a,b){
alert(a-b);}

add.call(sub,3,1);

这个会输出add方法输出4

2.在对DOM操作的时候$().each()

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $('li').each(function (i) {
        alert(i);
        alert($(this).text());//弹框分别输出 0 苹果 1 橘子 2 香蕉 其实function(i)中表示遍历的索引

    })
</script>