jQuery实现动态生成Dom列表并左右移动（一）

最新推荐文章于 2024-09-26 01:42:12 发布

xiyang5530

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量163

点赞数

分类专栏： jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xiyang5530/article/details/84407012

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面效果如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script>
<style>
	#ulLeft {float:left;list-style:none;border:1px solid #000;padding:0;width:100px;height:120px}
	#ulRight {float:left;list-style:none;border:1px solid #000;margin-left:100px;padding:0;width:100px;height:120px}
	.selLi {background:green}
</style>
</head>
<body>
	<div id="divAll">
		<ul id="ulLeft">
		</ul>
		<ul id="ulRight">
		</ul>
	</div>
</body>

<script> 
	$(function(){
		var jsonArr = [{"id":1,"name":"Andrew"},
		               {"id":2,"name":"Bruce"},
		               {"id":3,"name":"Simpzon"},
		               {"id":4,"name":"SitePoint"}];
		
		for(var index=0;index<jsonArr.length;index++){
			
			var liObj = $("<li id="+ jsonArr[index].id +">"+ jsonArr[index].name +"</li>")
				.click(function(){
					if($(this).parent().attr("id") == "ulLeft"){
						$("#ulRight").append($(this));
					}else{
						$("#ulLeft").append($(this));
					}
				})
			$("#ulLeft").append(liObj);
		}
	});
	
</script>

</html>