实例
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>两个ul标签中的li互相移动</title> <style type="text/css"> ul { list-style-type: none; float: left; margin-right: 30px; background-color: #f59b2b; width: 40%; height: 50%; padding: 0px; } li { margin-bottom: 5px; background-color: #15c37d; ; } </style> <script src="../js/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> var myJson = [ {"id": "1", "Name": "编号", "level": "1"}, {"id": "2", "Name": "名称", "level": "1"}, {"id": "3", "Name": "类型", "level": "1"}, {"id": "4", "Name": "使用人","level": "1"}, {"id": "5", "Name": "电子标签","level": "1"}, {"id": "6", "Name": "登记位置","level": "1"}, {"id": "7", "Name": "当前位置","level": "1"}, {"id": "8", "Name": "分离检测","level": "1"}, {"id": "9", "Name": "分离检测","level": "1"}, {"id": "10", "Name": "电量","level": "1"}]; $(function () { //动态添加Json数据到leftUL中 var $leftUL = $("#leftUL"); var $rightUL = $("#rightUL"); for (var i = 0; i < myJson.length; i++) { $myLi = $("<li id='" + myJson[i].id + "'>" + myJson[i].Name +"</li>"); // $myLi = $("<li id='" + 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> <ul id="leftUL">所有列</ul> <ul id="rightUL" style="clear: right">想要的列</ul> <label style=" 30%;float: left;">1</label> <label style=" 30%;float: left;">2</label> <label style=" 30%;float: left;"><input type="submit" name="Submit" value="提交" id="boxvalue"></label> </html>