JQuery中两个ul标签的li互相移动实现方法

这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下

本文实例讲述了JQuery中两个ul标签的li互相移动实现方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>两个ul标签中的li互相移动</title> 
7. <style type="text/css"> 
8. ul{ 
9. list-style-type:none; 
10. float:left; 
11. margin-right:30px; 
12. background-color:Green; 
13. width:100px; 
14. height:100px; 
15. padding:0px; 
16. } 
17. li{ 
18. margin-bottom:5px; 
19. background-color:Red; 
20. } 
21. </style> 
22. <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
23. <script type="text/javascript"> 
24. var myJson = [{ "id": "1", "Name": "刘德华", "Age": "52" }, 
25. { "id": "2", "Name": "文章", "Age": "26" }, 
26. {"id":"3","Name":"孙红雷","Age":"40"}, 
27. { "id": "4", "Name": "葛优", "Age": "58"}]; 
28. $(function () { 
29. //动态添加Json数据到leftUL中 
30. var $leftUL = $("#leftUL"); 
31. var $rightUL = $("#rightUL"); 
32. for (var i = 0; i < myJson.length; i++) { 
33. $myLi = $("<li id='" + myJson[i].id + "'>" + myJson[i].Name + "," + myJson[i].Age + "岁</li>"); 
34. $myLi.click(function () { 
35. if ($(this).parent().attr("id") == "leftUL") { 
36. //通过判断父元素的ID来控制往哪个UL添加 
37. //$rightUL.append($(this)); //第一种方法 
38. $(this).appendTo($rightUL); //第二种方法 
39. } 
40. else { 
41. $(this).appendTo($leftUL); //第二种方法 
42. } 
43. }); 
44. $leftUL.append($myLi); 
45. } 
46. }); 
47. </script> 
48. </head> 
49. <body> 
50. <ul id="leftUL"> 
51. </ul> 
52. <ul id="rightUL"> 
53. </ul> 
54. </body> 
55. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。