jquery中的foreach数据的遍历

教程分享 > Java教程 > 博文分享 (4874) 2024-07-19 16:32:54

jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery each</title>
</head>
<body>
	<div id="testDiv">
	<ul>
	<li data-id="1">1F</li>
	<li data-id="2">2F</li>
	<li data-id="3">3F</li>
	<li data-id="4">4F</li>
	<li data-id="5">5F</li>
	</ul>
	</div>
<!-- 引入jquery -->
<script src="/resources/framework/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
	//1.$(selector).each(function(index){});
	//$(selector).each();适合场景,对HTML页面的DOM元素进行操作
	//例如下面将进行ul的li遍历取出所有data-id的值
	var tmpStr1='';
	$('#testDiv ul li').each(function(index){//index参数,索引
		tmpStr1+=$(this).attr("data-id");//获取li中的data-id属性的值
		tmpStr1+=',';//豆号分开,方便查看
	});
	alert("tmpStr1->:"+tmpStr1);
	
	//2.$.each(arr,function(index,item){})
	//$.each();适合对已知的元素数组进行遍历;
	//适合场景ajax调用后台返回数据遍历值,或者已知数组,例如:
	var arr=[1,2,3,9];
	var tmpStr2='';
	$.each(arr,function(index,item){//index,索引位置,item取出来的数组值
		tmpStr2+=item;
		tmpStr2+=',';
	});
	alert("tmpStr2->:"+tmpStr2);
	//也可以先获取HTML页面的dom对象数组,然后遍历
	var tmpStr3='';
	var arrli=$('#testDiv ul li');
	$.each(arrli,function(index,item){
		tmpStr3+=$(item).attr("data-id");//获取li中的data-id属性的值
		tmpStr3+=',';//豆号分开,方便查看
	});
	alert("tmpStr3->:"+tmpStr3);
	//明显的$(selector).each()遍历HTML页面元素会写更少的代码
})
</script>
</body>
</html>

运行HTML代码显示
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
 


相关文章
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
jQuery之MD5加密插件使用及下载,网络中md5进行简单加密的地方越来越多。这里讲解一个jQuery的md5插件
HTML5+ajax上传图片/文件以及FormData使用简单讲解,HTML5,ajax上传文件,ajax
Java编程转义HTML标签格式内容,在许多的cms模块业务的时候我们需要保存大量的HTML文档,某些情况我们也可能会进行HTML文档的转义防止一些变故。
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
thymeleaf 设置不校验html标签
jQuery 取选中的radio的值方法,jQuery,radio
jQuery select 获取值$title(方法一:) let val=$('#selectId').val(); //获取选中值 $title(方法二:) let val=$('#se...
在这个Spring5教程中,学习创建Spring 5 MVC Web应用程序,处理表单提交,集成hibernate连接到后端数据库,以及添加用于输入表单字段验证的hibernate验证器。
jQuery checkbox获取选中状态let check=$(this).is(':checked') console.log(check); // true /false注意通过form...
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
jQuery添加/改变/移除CSS类及判断是否已经存在CSS,jquery,css
Spring框架5.0,spring mvc 5.0入门教程。DispatcherServlet的详细讲解配置以及spring mvc5.0的helloword程序