JQuery中的each()方法和$.each()函数的使用

Myth丶恋晨 2021-08-31 14:29 441阅读 0赞

# 1、each()方法的使用 #

JQuery提供了 each() 方法用于遍历匹配的元素信息。以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时，函数中的 this 关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环（就像在普通的循环中使用 'break'）。返回 'true' 跳至下一个循环（就像在普通的循环中使用'continue'）。

**使用语法如下：**

//使用each()方法，遍历选中的复选框值
    $("[name=checkItem]:checkbox:checked").each(function(index){
        alert($(this).val());
    });

**【示例】**使用JQuery的 each() 方法，遍历选中复选框的值。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery中的each()方法的使用</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
        <h3>请选择用户信息：</h3>
        <input type="checkbox" name="checkItem" value="1"/> pan_junbiao的博客_01<br>
        <input type="checkbox" name="checkItem" value="2"/> pan_junbiao的博客_02<br>
        <input type="checkbox" name="checkItem" value="3"/> pan_junbiao的博客_03<br>
        <input type="checkbox" name="checkItem" value="4"/> pan_junbiao的博客_04<br>
        <input type="checkbox" name="checkItem" value="5"/> pan_junbiao的博客_05<p>
        <input type="button" value="提交" id="btnSubmit"/>
    </body>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function(){
            //提交
            $("#btnSubmit").click(function()
            {
                //用户编号数组
                var idArray = new Array();
    
                //使用each()方法，遍历选中的用户编号
                $("[name=checkItem]:checkbox:checked").each(function(index){
                    idArray.push($(this).val());
                });
    
                //打印结果
                console.log("您选择共：" + idArray.length + "条数据！")
                console.log(idArray);
            });
        });
    </script>
    </html>

**执行结果：**

![2020073010102887.jpg][]

当点击提交按钮后，控制器输出的信息如下图：

![2020073010165780.jpg][]

# 2、$.each()函数的使用 #

JQuery还提供了一个通用的遍历方法 $.each()，可以用于遍历对象和数组。$.each() 函数不同于 JQuery 对象的 each() 方法，它是一个全局函数，不操作 JQuery 对象，而是以一个数组或对象作为第1个参数，以一个回调函数作为第2个参数。在回调函数中拥有两个参数：第1个参数为对象的成员或数组的索引，第2个参数为对应变量或内容。如果需要退出 $.each() 循环可使回调函数返回 false，其它返回值将被忽略。

**使用语法如下：**

//使用$.each()函数，遍历数据
    $.each(data,function(index,item)
    {
        //忽略其他代码...
    });

**【示例】**调用后台方法获取用户列表，并使用JQuery的 $.each() 函数，遍历用户列表。

（1）创建用户信息控制器（Controller），并编写获取用户列表方法。

/**
     * 用户信息控制器
     * @author pan_junbiao
     **/
    @Controller
    @RequestMapping("user")
    public class UserController
    {
        /**
         * 获取用户列表
         */
        @ResponseBody
        @RequestMapping("getUserList")
        public List<UserInfo> getUserList()
        {
            //创建用户列表
            List<UserInfo> userInfoList = new ArrayList<>();
            userInfoList.add(new UserInfo(1, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
            userInfoList.add(new UserInfo(2, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
            userInfoList.add(new UserInfo(3, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
            userInfoList.add(new UserInfo(4, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
            userInfoList.add(new UserInfo(5, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
            //返回结果
            return userInfoList;
        }
    }

（2）创建显示页面（View），显示用户列表信息。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery中的$.each()函数的使用</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
    <input type="button" value="获取用户信息" id="btnGetUser"/>
    <div id="content" style="margin-top: 10px;"></div>
    </body>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#btnGetUser").click(function(){
                $.getJSON("/user/getUserList", function(data){
                    $("#content").empty();
    
                    var html = "";
    
                    //使用$.each()函数，遍历数据
                    $.each(data,function(index,item)
                    {
                        html += " 索引：" + index;
                        html += " 用户编号：" + item.userId;
                        html += " 用户名称：" + item.userName;
                        html += " 博客信息：" + item.remark;
                        html += "<br>";
                    });
    
                    $("#content").html(html);
                });
            });
        });
    </script>
    </html>

**执行结果：**

![20200730112136586.png][]

[2020073010102887.jpg]: /images/20210724/afcf88458063472aba3f2a5ff422b59a.png
[2020073010165780.jpg]: /images/20210724/11e787a1e2f1450c9a8e77ddd4105d9c.png
[20200730112136586.png]: /images/20210724/d4928a5b0d6e4375b016dd95216e7b3d.png