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); 
     } 
    } 
});