這篇文章主要介紹了JQuery中兩個ul標簽的li互相移動實現方法,可實現ul標簽中li標簽內容相互替換的技巧,涉及jQuery操作頁面元素的相關技巧,需要的朋友可以參考下
本文實例講述了JQuery中兩個ul標簽的li互相移動實現方法。分享給大家供大家參考。具體實現方法如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <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:Green;
- width:100px;
- height:100px;
- padding:0px;
- }
- li{
- margin-bottom:5px;
- background-color:Red;
- }
- </style>
- <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- var myJson = [{ "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 (var i = 0; i < myJson.length; i++) {
- $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">
- </ul>
- </body>
- </html>
希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
