2010-08-08 81 views
0

如何將位置交給同一父母的孩子?
我使用這種模式的代碼解決。 有沒有更簡單的方法?例如這樣的事情:$("#id1").exchange($("#id2"));jQuery - 交換元素位置

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
     button { display:block; margin:3px; color:red; width:200px; } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    </head> 
    <body> 
    <h1>Exchange places</h1> 
    <ul> 
    <li id="a">a</li> 
    <li id="b">b</li> 
    <li id="c">c</li> 
    <li id="d">d</li> 
    </ul> 
    <button>exchange 1st,2nd</button> 
    <button>exchange 1st,4th</button> 
    <button>exchange 2nd,3rd</button> 
    <script> 

     $("button:first").click(function() { 
      var cp = $("li:eq(0)").clone(); 
      $("li:eq(0)").replaceWith($("li:eq(1)").clone()); 
      $("li:eq(1)").replaceWith(cp); 
     }); 

     $("button:eq(1)").click(function() { 
      var cp = $("li:eq(0)").clone(); 
      $("li:eq(0)").replaceWith($("li:eq(3)").clone()); 
      $("li:eq(3)").replaceWith(cp); 
     }); 

     $("button:last").click(function() { 
      var cp = $("li:eq(1)").clone(); 
      $("li:eq(1)").replaceWith($("li:eq(2)").clone()); 
      $("li:eq(2)").replaceWith(cp); 
     }); 
    </script> 

    </body> 
    </html> 

回答

1

您應該考慮使用.sortable()使用jQuery UI。 沒有無用的按鈕,更容易操作。

Take a look

+0

謝謝您的回覆。在我的項目中,李元素是帶有「向上移動」「向下移動」鏈接的div元素。對於我的情況,因爲我不需要拖動功能,所以我確實不需要額外的「外掛程序」。 – Mattia 2010-08-08 22:31:42