двигаться вверх / вниз в jquery

Question

У меня есть 5 пролетов, я пытаюсь переместить их вверх / вниз (поменять позиции) в 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>

Я пробовал, но ничего не происходит.

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

Answer 1

Это потому, что вы говорите, что интервал должен идти перед следующим интервалом (то есть, оставаться таким же). Попробуйте использовать insertBefore для предыдущего или insertAfter для следующего.

РЕДАКТИРОВАТЬ Попробуйте это для размера: http://jsfiddle.net/eJk3R/

Answer 2

Вы пытаетесь вставить определенный диапазон перед следующим, чтобы он оставался в той же позиции ...

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

или

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

будет лучше.

Answer 3

Рассмотрим этот пример. Он не имеет хорошего стиля или чего-то в этом роде, но нажатие на кнопку «Вверх» или «Вниз» вставляет этот элемент либо до его предыдущего брата, либо после его следующего брата.

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