appendTo與排序，也許appendTo不是正確的使用？

Question

我想有3個複選框，我們可以稱它們爲checkbox1，checkbox2和checkbox3。

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
</div> 
<div id="endingpoint"></div> 
</form> 

我設置它們，所以當一個複選框被選中的是，它使用appendTo從「起點」到「終點」把他們重新安置。它工作正常。問題是，我希望他們保持按時間順序（他們開始的順序）。

SO ...如果我檢查「checkbox3」，然後「checkbox1」，我想要的結果是這樣的：

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
</div> 
<div id="endingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
</div> 
</form> 

但......對於appendTo的工作方式，我得到這個（注認爲「checkbox3」高於「checkbox1」）

<form id="test"> 
<div id="startingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox2" value="1" />checkbox2</div> 
</div> 
<div id="endingpoint"> 
<div id="clickdiv"><input type="checkbox" id="checkbox3" value="1" />checkbox3</div> 
<div id="clickdiv"><input type="checkbox" id="checkbox1" value="1" />checkbox1</div> 
</div> 
</form> 

我怎樣才能讓他們在時間順序，特別是他們開始的順序。也許appendTo是解決不了問題？

加入迴應評論：

<script type="text/javascript"> 
$(function(){ 
$('#test input').attr('checked', false); 
$('#test input').click(function(){ 
    if (this.checked) { 
     $(this).closest('div').hide().appendTo("#endingpoint").fadeIn(1000) 
    } 
    else { 
     $(this).closest('div').hide().appendTo("#startingpoint").fadeIn(1000) 
    } 
}); 
}); 
</script> 

Answer 1

一個簡單的解決辦法是有三個空的div作爲終點的孩子，使用的ID或其他屬性來識別它們。當選中複選框時，端點中相應div的html被設置爲複選框html。

---

更新（響應評論）：

你可以設置你的代碼，以便它是無關緊要多少複選框有。您可以通過設置屬性「訂單」來獲取對象的索引，然後調用this.attr（'order'）以獲取訂單值並追加到$（'＃clickDiv'+ order）。您也可以使用ID屬性和簡單的字符串操作來達到相同的效果。

Answer 2

我想你追加到「測試」股利。這種行爲是合乎邏輯的。最後附加的是在底部。

嘗試：

$('input').click(function() { 
    $(this).insertAfter('#endingpoint'); 
); 

編輯：好了，你加入你的腳本，我想現在你知道該怎麼做。使用「insertAfter」而不是「appendTo」

Answer 3

我會去與具有佔位符的簡單的解決方案，但如果你真的想無限盒的算法，你可以這樣做http://jsfiddle.net/rkw79/zCVGZ/：

標籤所有的div屬性：在終點

$('#startingpoint div.clickdiv').each(function(i,o) { 
    $(o).attr('order', i); 
}); 

插入基於他們的「秩序」 ATTR上：

$('#startingpoint').delegate('div.clickdiv', 'click', function() { 
    var clickeddiv = $(this).detach(); 
    if (clickeddiv.attr('order') == 0) { 
     $('#endingpoint').prepend(clickeddiv); 
    } else { 
     var inserted = false; 
     $('#endingpoint div.clickdiv').each(function(i,o) { 
      if (clickeddiv.attr('order') < $(o).attr('order')) { 
       $(o).before(clickeddiv); 
       inserted = true; 
       return false; 
      } 
     }); 
     if (!inserted) { 
      $('#endingpoint').append(clickeddiv); 
     } 
    } 
});