Search code examples
jqueryappendto

appendTo with ordering, perhaps appendTo is not the right thing to use?

I want to have 3 checkboxes, lets call them checkbox1, checkbox2, and 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>

I set them up so that when a checkbox is checked, it uses appendTo to relocate them from "starting point" to "ending point". It is working fine. Problem is, I want them to stay in chronological order (the order they started in).

SO...if I checked "checkbox3" and then "checkbox1", I want the result to be this:

<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>

BUT...with the way appendTo works, I get this (note that "checkbox3" is above "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>

How can I keep them in chronological order, specifically the order that they started in. Perhaps appendTo isn't the solution?

ADDED IN RESPONSE TO COMMENT:

<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>
Solution

  • A simple solution would be to have three empty divs as children of endpoint, use IDs or another attribute to identify them. When a checkbox is selected, the html of the corresponding div in endpoint is set to the checkbox html.

    Update (Response to comment):

    You can setup your code so that it is irrelevant how many checkboxes there are. You can get the index of an object by setting an attribute 'order' for example then call this.attr('order') to get the order value and append to $('#clickDiv' + order). You can also use the ID attribute and simple string manipulation to the same effect.