move up/down in jquery

I Have 5开发者_JAVA百科 spans i am trying to move them up/down (swap positions) in jquery

<a href="#" id="up">Up!</a> 
<a href="#" id="down">Down!</a>

<span id='1'>Test1</span><br>
<span id='2'>Test2</span><br>
<span id='3'>Test3</span><br>
<span id='4'>Test4</span><br>
<span id='5'>Test5</span>

i have tryed but nothing is happening.

 $("#"+LinkID).insertBefore($("#"+LinkID).next('span')); 

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/

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.

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>