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>

在jquery中向上/向下移动

3 个答案: