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>

执行结果：

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

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>

执行结果：

JQuery中的each()方法和$.each()函数的使用相关推荐

jquery中的map()方法与js中的map()方法
1.jquery中的map()方法首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用首先介绍下$.ajax的参数 type:请求方式 GET/ ...
js中的onclick事件和JQuery中的click方法以及on方法事件用法总结
1.onclick是绑定的事件(它是一个事件),注意该事件绑定只是JacaScript中有(js中的),Jquery中并没有此事件,告诉浏览器在鼠标点击时候要做什么 2.click方法(jquery中 ...
jQuery 中的 get() 方法
jQuery 中的 get() 方法开发工具与关键技术:Microsoft Visual Studio,jQuery知识作者:张智鹏撰写时间:2020 年 8 月 17 日在 jQuery 中 ...
jQuery中的hover()方法
jQuery中的hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数(enter),当光标移出这个元素时,会触发指定的第二个函数(leave).如下面一段代码: < ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
jQuery中animate( )的方法及$(“body“).animate({‘scrollTop‘:top},500)不被Firefox支持问题的解决
jQuery中animate( )的方法及$("body").animate({'scrollTop':top},500)不被Firefox支持问题的解决参考文章: (1)jQu ...
jQuery 中的 end 方法
如有错误,欢迎批评指正! jQuery 中的 end 方法,我从 stackoverflow 上的一个回答开始讲: 原文链接: What does the .end() function do in ...

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

1、each()方法的使用

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

JQuery中的each()方法和$.each()函数的使用相关推荐

最新文章

热门文章