网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery $.each()函数使用实例方法

2021/9/30 21:20:34

jQuery提供了一个通用的遍历方法 $.each(),可以用于遍历对象和数组。$.each() 函数不同于 jQuery 对象的 each() 方法,它是一个全局函数,不操作 jQuery 对象,而是以一个数组或对象作为第1个参数,以一个回调函数作为第2个参数。在回调函数中拥有两个参数:第1个参数为…

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

        接下来我们调用后台方法获取用户列表,并通过jQuery的 $.each() 函数来遍历用户列表。

        (1)创建用户信息控制器(Controller),并编写获取用户列表方法。

/**
 * 用户信息控制器
 **/
@Controller
@RequestMapping("user")
public class UserController
{
    /**
     * 获取用户列表
     */
    @ResponseBody
    @RequestMapping("getUserList")
    public List<UserInfo> getUserList()
    {
        //创建用户列表
        List<UserInfo> userInfoList = new ArrayList<>();
        userInfoList.add(new UserInfo(1, "张飞", "粗中有细"));
        userInfoList.add(new UserInfo(2, "关羽", "义薄云天,忠义两全"));
        userInfoList.add(new UserInfo(3, "黄忠", "老骥伏枥"));
        userInfoList.add(new UserInfo(4, "魏延", "行事卤莽,居功自傲"));
        userInfoList.add(new UserInfo(5, "赵云", "心贯金石,骁勇善战"));
        //返回结果
        return userInfoList;
    }
}

        在html里通过jQuery $.each()函数来来遍历用户列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery $.each()函数使用实例方法—www.woaidaogu.com</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="https://cdn.staticfile.org/jquery/1.10.2/jquery.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>

        通过以上内容我们知道了jQuery $.each()函数的使用方法,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...