JQuery中两个ul标签的li互相移动实现方法
本文实例讲述了JQuery中两个ul标签的li互相移动实现方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>两个ul标签中的li互相移动</title>
<styletype="text/css">
ul{
list-style-type:none;
float:left;
margin-right:30px;
background-color:Green;
width:100px;
height:100px;
padding:0px;
}
li{
margin-bottom:5px;
background-color:Red;
}
</style>
<scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
varmyJson=[{"id":"1","Name":"刘德华","Age":"52"},
{"id":"2","Name":"文章","Age":"26"},
{"id":"3","Name":"孙红雷","Age":"40"},
{"id":"4","Name":"葛优","Age":"58"}];
$(function(){
//动态添加Json数据到leftUL中
var$leftUL=$("#leftUL");
var$rightUL=$("#rightUL");
for(vari=0;i<myJson.length;i++){
$myLi=$("<liid='"+myJson[i].id+"'>"+myJson[i].Name+","+myJson[i].Age+"岁</li>");
$myLi.click(function(){
if($(this).parent().attr("id")=="leftUL"){
//通过判断父元素的ID来控制往哪个UL添加
//$rightUL.append($(this));//第一种方法
$(this).appendTo($rightUL);//第二种方法
}
else{
$(this).appendTo($leftUL);//第二种方法
}
});
$leftUL.append($myLi);
}
});
</script>
</head>
<body>
<ulid="leftUL">
</ul>
<ulid="rightUL">
</ul>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。