jQuery实现动态生成Dom列表并左右移动（一）
页面效果如下：
代码如下：
<!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> 相关推荐
爱读书的旅行者 2020-07-07
liaoxuewu 2020-05-19
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21