使用 jQuery 将包含元素上下移动。

Question

感谢您可以提供的任何帮助！目前，我使用一个ui-sortable代码来允许用户按顺序上下移动项目。现在，我想为每个项目添加一组“向上”和“向下”按钮，以便用户可以通过单击上下移动项目。我已经尝试重新制作这些文章，但似乎我错过了一些明显的东西...

jQuery可排序移动上下按钮 jQuery中的上下移动

我认为某种方式我没有将jQuery应用于正确的元素。我的jsfiddle在这里：http://jsfiddle.net/kevindp78/vexw5/2/，代码如下。

HTML

<div id="box" class="ui-sortable" style="display: block;"> 
<div class="leg">
    <a class="image">IMG1</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff1
    </div>
</div>
<div class="leg">
    <a class="image">IMG2</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff2
    </div>
</div>
<div class="leg">
    <a class="image">IMG3</a>
    <div class="details">
        <h3><a href="/details">Info</a></h3>
        <span class="moreinfo">MoreInfo</span>
    </div>
    <div class="clear"></div>
    <div class="up-down">
        <p>Change Order</p>
        <div class="up">
            <input type="button" value="Up" class="up-button"/>
        </div>
        <div class="down">
            <input type="button" value="down" class="down-button"/>
        </div>
    </div>
    <div class="morestuff">
        Stuff3
    </div>

</div>

JS

$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});

$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});

- KDP

---

缺少分号是打字错误，对吗？ - dsgriffin

Answer 1

你的代码有几个问题需要解决，让我们按顺序逐一查看。

首先是$('up-button')，缺少了.，因此无法选择按钮。

接下来，您使用的是parent()方法，它只向上走一级，请改用parents('.leg')。

insertBefore()是一种接受目标位置以放置所选内容的方法。

previous()不是一个函数，应该改为prev()，它不需要参数，因为它只选择前一个元素。

如果您将所有这些修复结合起来，就会得到类似以下的内容

$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

$('.down-button').click(function(){
  $(this).parents('.leg').insertAfter($(this).parents('.leg').next());
});

此编辑后的fiddle展示了：http://jsfiddle.net/vexw5/6/

- BeardFist

---

虽然这不是第一个回答，但它是最有信息量和详细的回答，让我能够知道自己哪里出错了（而且还有很多需要学习的地方！）谢谢 @BeardFist。 - KDP

完美运行。感谢您提供优雅简洁的解决方案！+1 - Sébastien

Answer 2

您可以尝试使用类似以下代码替换您的JS代码：

您可以尝试使用以下代码替换您的JS代码：

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

这只是基础部分，没有任何动画或其他东西。

这里是示例链接：http://jsfiddle.net/vexw5/7/

- Ryan

---

我给了 @BeardFist 正确的答案，因为它更详细地解释了我所犯的错误。我也非常感谢你的解决方案；感谢你抽出时间来帮助我。 - KDP