jquery的each循环

最新推荐文章于 2023-12-31 13:07:18 发布

转载最新推荐文章于 2023-12-31 13:07:18 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yimiaoyikan/p/11000943.html

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery中each循环的两种使用方式，一是遍历数组或对象，二是遍历DOM元素。通过实例展示了如何使用each循环处理数据和DOM操作，是前端开发者掌握jQuery的重要参考资料。

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

jquery的each循环,主要有2种:

1) 循环数据

语法: jQuery.each(object,[callback])

参数:

　　object: 需要遍历的对象或数组。

　　callback: 每个成员/元素执行的回调函数.回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

例子1: 循环一个列表

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"  ></script>
    <script>
        var arr=[123,456,789,0];
        $.each(arr,function(i,j){
        console.log(i,j);
        })
    </script>
</head>
<body>

显示结果如下: 列表的每个索引和他对应的值

例子2: 循环一个对象

        var obj={"name":"tom","age":15};
        $.each(obj,function(i,j){
        console.log(i,j);
        });

结果:显示对象中的key和value

2)循环标签元素

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"  ></script>
    <script>
        $(function () {
            $("ul li a").each(function () {
                console.log($(this).html())
            })
        })

    </script>
</head>

<body>
<ul>
    <li><a href="">关于我们</a></li>
    <li><a href="">联系方式</a></li>
    <li><a href="">产品答疑</a></li>
</ul>


</body>
</html>

注意: 这样写一定要写$(function (){}),$(function (){})是$(document).ready(function()的简写,会在DOM加载完毕之后执行.

转载于:https://www.cnblogs.com/yimiaoyikan/p/11000943.html