jquery常用遍历循环处理

最新推荐文章于 2021-06-14 08:58:53 发布

weixin_34380296

最新推荐文章于 2021-06-14 08:58:53 发布

阅读量345

点赞数

原文链接：https://my.oschina.net/tbd/blog/508397

版权

为什么80%的码农都做不了架构师？>>>

‍‍一、基本数组和for循环‍‍

最基本的遍历输出：

$(function(){
	var arr=[111,222,333,444,555,666];
	for(var i=0;i<arr.length;i++){
		$("#tab").append("<tr><td>"+arr[i]+"</td></tr>");
	};
	
});

html结构：

   <div class="box">
    	<table id="tab">
    		
    	</table>
    </div>

二、基本数组和for in循环

$(function(){
	var arr=[111,222,333,444,555,666];
	for(var i in arr){
		$("#tab").append("<tr><td>"+arr[i]+"</td></tr>");
	};
	
});

三、object类型和for in循环

$(function(){
	var obj={'a':123,'b':456,'c':789};
	for(var i in obj){
		$("#tab").append("<tr><td>"+obj[i]+"</td></tr>");
	};

	
});

四、基本数组和while循环

$(function(){
	var arr=[111,222,333,444,555,666];
	var index=0;
	while(arr[index]){		
		$("#tab").append("<tr><td>"+arr[index]+"</td></tr>");
		index+=1;
	}
	
});

五、二维数组和for循环

$(function(){
	var arr=[[1,1111],[2,222],[3,333]];
	for(var i=0;i<arr.length;i++){
		var tr=$("<tr></tr>")
		for(var j=0;j<arr[i].length;j++){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr)
	};
	
});

六、json类型和for循环&&for in循环

$(function(){
	var arr=[{'姓名':111,'性别':0},{'姓名':888,'性别':0},{'姓名':999,'性别':1}];
	for(var i=0;i<arr.length;i++){
		var tr=$("<tr></tr>")
		for(var j in arr[i]){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr)
	};
	
});

七、json类型和while循环&&for in循环

$(function(){
	var arr=[{'姓名':111,'性别':0},{'姓名':888,'性别':0},{'姓名':999,'性别':1}];
	var i=0;
	while(arr[i]){
		var tr=$("<tr></tr>")
		for(var j in arr[i]){
			tr.append("<td>"+arr[i][j]+"</td>")
		};
		$("#tab").append(tr);
		i+=1;
	};
	
});

总结：

for循环非常简单

for in要记住的就是定义的变量接收的是循环对象的下标

while循环要定义循环指针变量，通过条件成立（获取到内容）让指针下移动（+1），获取不到内容（指针指到最后一个的下一个）条件不成立不在进行循环

八、字符串和while循环

var str="好11111111，人222222222，在3333333333，那4444444444，里55555555"；
var val="在";

如何输出：‘在’后面的所有‘3’？？

方法一：数组处理

$(function(){
	var str="好11111111，人222222222，在3333333333，那4444444444，里55555555";
	var val="在";
	var changearr=str.split('，');
	var rres;
	for(var i=0;i<changearr.length;i++){
		var temp=changearr[i].split('');
		if(temp[0]==val){
			rres=temp;
		}
	};
	var res='';
	for(var i=0;i<rres.length;i++){
		if(i==0){

		}else{
			res+=rres[i];
		}
	};
	alert(res)
	
});

方法2：while处理

$(function(){
	var str="好11111111，人222222222，在3333333333，那4444444444，里55555555";
	var val="在";
	var index=str.search(val);
	var i=1;
	var res='';
	while(str.charAt(index+i)!="，"){
		res+=str.charAt(index+i);
		i+=1;
	};
	alert(res)
	
});

九、for循环跳跃式

差值为3的跳跃

$(function(){
	var arr=[11,22,33,111,22,33,111,22,33];
	var newarr=[];
	for(var i=0;i<arr.length;i+=3){
		newarr+=arr[i];
	};
	alert(newarr);
	
});

我们在做canvas的时候，2d画布有一个getimagedata方法，可以返回一个对象得到他的data值，为一维数组，按照[r,g,b,a,r,g,b,a,......]形式

我们的理想状态就是[rgba,rgba,......],我们就会用到差值为4的循环处理

$(function(){
	var arr=[0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255];
	var rgbaarr=[];
	for(var i=0;i<arr.length;i+=4){
		var r=arr[i];
		var g=arr[i+1];
		var b=arr[i+2];
		var a=arr[i+3];
		var rgba=r+" "+g+" "+b+" "+a;
		rgbaarr.push(rgba);
	};
	alert(rgbaarr);
	
});

十、for循环递减式，实现数组反转

有一个这样的数组

var arr=[9,8,7,6,5,4,3,2,1,0];

反转处理1：数组提供的reverse方法

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	alert(arr.reverse())
	
});

反转处理2：数组降序循环

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	var rearr=[];
	for(var i=(arr.length-1);i>=0;i--){
		rearr.push(arr[i]);
	}
	alert(rearr)
	
});

十一、for循环跳跃减式

同增加跳跃同理

$(function(){
	var arr=[9,8,7,6,5,4,3,2,1,0];
	var rearr=[];
	for(var i=(arr.length-1);i>=0;i-=3){
		rearr.push(arr[i]);
	}
	alert(rearr)
	
});

十二、do while循环

把上面while的改成do while 先执行程序，在判断条件是否为真

$(function(){
	var arr=[111,222,333,444,555,666];
	var index=0;
	do{
		$("#tab").append("<tr><td>"+arr[index]+"</td></tr>");
		index+=1;
	}while(arr[index]);
	
});

十三、利用for循环实现加载更多效果（假如有35条数据，开始显示10条，点击‘加载更多’在显示10条，依次到最后）

我们创建35条数据，json类型，类似模拟ajax的加载跟多处理

var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
	];

我们静态html结构，添加加载更多按钮，

<div class="box">
    	
    </div>
    <button id="more">加载更多</button>

我们的整体实现，核心是（page-1）*limit 我们当前的页数减去1乘以显示个数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <button id="more">加载更多</button>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#more").click(function(){
		page+=1;
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	
});
</script>

</html>

十四、利用for循环实现分页效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
 p span{ margin: 0 5px;color: blue; cursor:pointer;}
p span.fou{color: red; }
.box{height: 200px;}
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <p id="page"></p>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;
	for(var i=1;i<=allapge;i++){
		if(i==1){
			$("#page").append('<span class="fou">'+i+'</span>');
		}else{
			$("#page").append('<span>'+i+'</span>');
		}
		
	}
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#page").children().click(function(){
		$(this).addClass('fou').siblings().removeClass('fou');
		page=$(this).html();
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
});
</script>

</html>

与加载跟多分页的难度就是总页数的处理

var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;

记录总个数与显示个数取余数（模）判断是否整除，不整除+1页

我们的分页添加其他页面处理按钮：第一页，最后一页，跳页，上一页，下一页；

基本功能完善的分页实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;}  
 p span{ margin: 0 5px;color: blue; cursor:pointer;}
p span.fou{color: red; }
.box{height: 200px;}
</style>
<script src="js/jquery-min.js"></script>
<title>demo</title>
</head>
<body> 
    <div class="box">
    	
    </div>
    <p id="page"></p>
    <p id="other">
    	<span id="first">第一页</span>
    	<span id="prev">上一页</span>
    	<span id="next">下一页</span>
    	<span id="last">最后一页</span>
    	<input type="text" id="sum" /><span id="skip">跳转</span>
    </p>
</body>
<script type="text/javascript"> 
$(function(){
	var jsondata=[
		{'aa':111,'bb':111111},
		{'aa':222,'bb':111111},
		{'aa':333,'bb':111111},
		{'aa':444,'bb':111111},
		{'aa':555,'bb':111111},
		{'aa':666,'bb':111111},
		{'aa':777,'bb':111111},
		{'aa':888,'bb':111111},
		{'aa':999,'bb':111111},
		{'aa':123,'bb':111111},
		{'aa':456,'bb':111111},
		{'aa':789,'bb':111111},
		{'aa':987,'bb':111111},
		{'aa':654,'bb':111111},
		{'aa':321,'bb':111111},
		{'aa':556,'bb':111111},
		{'aa':223,'bb':111111},
		{'aa':112,'bb':111111},
		{'aa':889,'bb':111111},
		{'aa':778,'bb':111111},
		{'aa':998,'bb':111111},
		{'aa':447,'bb':111111},
		{'aa':852,'bb':111111},
		{'aa':741,'bb':111111},
		{'aa':963,'bb':111111},
		{'aa':369,'bb':111111},
		{'aa':258,'bb':111111},
		{'aa':147,'bb':111111},
		{'aa':753,'bb':111111},
		{'aa':159,'bb':111111},
		{'aa':000,'bb':00000},
		{'aa':0,'bb':000},
		{'aa':00,'bb':000},
		{'aa':0000,'bb':0}
	];
	var page=1;
	var limit=10;
	var allapge=(jsondata.length%limit==0)?jsondata.length/limit:Math.floor(jsondata.length/limit)+1;
	for(var i=1;i<=allapge;i++){
		if(i==1){
			$("#page").append('<span class="fou">'+i+'</span>');
		}else{
			$("#page").append('<span>'+i+'</span>');
		}
		
	}
	for(var i=0;i<limit;i++){
		$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
	}

	$("#page").children().click(function(){
		$(this).addClass('fou').siblings().removeClass('fou');
		page=$(this).html();
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});

	$("#first").click(function(){
		$("#page").children().eq(0).addClass('fou').siblings().removeClass('fou');
		page=1;
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	$("#last").click(function(){
		$("#page").children().eq($("#page").children().length-1).addClass('fou').siblings().removeClass('fou');
		page=$("#page").children().length;
		$(".box").children().remove();
		for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
	});
	$("#prev").click(function(){
		if(page==1){
			$("#page").children().eq(0).addClass('fou').siblings().removeClass('fou');
			page=1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{
			$("#page").children().eq(page-2).addClass('fou').siblings().removeClass('fou');
			page=page-1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}
		
	});
	
	$("#next").click(function(){
		if(page==$("#page").children().length){
			$("#page").children().eq($("#page").children().length-1).addClass('fou').siblings().removeClass('fou');
			page=$("#page").children().length;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{
			$("#page").children().eq(page).addClass('fou').siblings().removeClass('fou');
			page=page+1;
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
			$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
		}
		}
		
	});
	$("#skip").click(function(){
		if($("#sum").val()>0 && $("#sum").val()<=$("#page").children().length){
			$("#page").children().eq($("#sum").val()-1).addClass('fou').siblings().removeClass('fou');
			page=$("#sum").val();
			$(".box").children().remove();
			for(var i=(page-1)*limit;i<(page-1)*limit+limit;i++){
				$(".box").append('<p><span>'+jsondata[i].aa+'</span><em>'+jsondata[i].bb+'</em></p>');
			}
		}else{

		}
		
	});

});
</script>

</html>

转载于:https://my.oschina.net/tbd/blog/508397