move up/down in jquery

Question

I Have 5 spans i am trying to move them up/down (swap positions) in jquery

Up! 
Down!         


        

Answer 1

Consider this example. Its not styled up well or anything, but clicking on Up or Down inserts that element either before its previous sibling or after its next sibling.

<style type="text/css">
    span.swapMe {
        float: left;
        clear: left;
    }
</style>

<span class="swapMe">Test1 <span class="up">Up!</span> <span class="down">Down!</span></span>
<span class="swapMe">Test2 <span class="up">Up!</span> <span class="down">Down!</span></span>
<span class="swapMe">Test3 <span class="up">Up!</span> <span class="down">Down!</span></span>
<span class="swapMe">Test4 <span class="up">Up!</span> <span class="down">Down!</span></span>
<span class="swapMe">Test5 <span class="up">Up!</span> <span class="down">Down!</span></span>


<script type="text/javascript">

$("span.up").click(function(){
    $(this).parent().insertBefore($(this).parent().prev())
});

$("span.down").click(function(){
    $(this).parent().insertAfter($(this).parent().next())
});


</script>

Answer 2

You're trying to insert a certain span before the next one, which makes it remain on the same position...

$("#"+LinkID).insertBefore($("#"+LinkID).prev());

or

$("#"+LinkID).insertAfter($("#"+LinkID).next()); 

would be better.

Answer 3

That's because you're telling a span to go before the next span (i.e., stay the same). Try using insertBefore on a previous or insertAfter with a next.

EDIT Try this on for size: http://jsfiddle.net/eJk3R/