在jquery中向上/向下移动答案

【问题标题】：move up/down in jquery在jquery中向上/向下移动
【发布时间】：2010-11-23 20:05:29
【问题描述】：

我有 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'));

【问题讨论】：

顺便说一下，您的 ID 无效。它们可能不是以数字开头
@Harmen - 考虑到有多少正在采用，你现在应该具体说明，它们在 HTML4 中是无效的（不是 HTML5）:)
@Nick，我不知道。我想我还是更喜欢更严格的 HTML4 规范；）

标签： jquery

【解决方案1】：

那是因为你告诉一个跨度在下一个跨度之前走（即保持不变）。尝试在上一个上使用 insertBefore 或在下一个上使用 insertAfter。

编辑试试这个尺寸：http://jsfiddle.net/eJk3R/

【讨论】：

【解决方案2】：

您试图在下一个跨度之前插入某个跨度，这使其保持在同一位置...

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

或

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

会更好。

【讨论】：

为了省去 jQuery 多次查找$("#"+LinkID) 的麻烦，最好存储它 I.E: var $link = $("#"+LinkID); $link.insertBefore($link.prev());
@Gully，它有效，我自己测试过。但也许您应该使用带有 <ul> 和 <li> 的列表。这些<br> 也是元素，这就有点复杂了。
<span><br> 很尴尬，<ul><li> 有效，但最简单的只是<div>
@generalhenry ：我基本同意，但这取决于上下文。如果这些是一组相关的项目，那么它们是一个列表，如果你重新排列顺序，它们可能是一个有序列表，所以应该被标记<ol><li>

【解决方案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>

【讨论】：