使用jQuery上下移动包含元素 [英] Move containing elements up and down with jquery

问题描述

感谢您提供的任何帮助！当前，我使用ui可排序的代码来允许用户按顺序上下移动项目.现在，我要为这些项目中的每一个提供一组向上"和向下"按钮，以允许用户单击即可上下移动项目.我已经尝试过修改这些帖子，但是似乎缺少一些明显的内容...

Thanks for any help you can provide! Currently, I use a ui-sortable code to allow users to move items up and down in order. Now, I want to give each of these items a set of "up" and "down" buttons that allow users to move items up and down with a click. I've tried reworking theses posts, but I seem to be missing something obvious...

jQuery Sortable上移/下移按钮 在jquery中向上/向下

我认为我不以某种方式将jquery应用于正确的元素.我的jsfiddle在这里: http://jsfiddle.net/kevindp78/vexw5/2/代码在下面.

I think somehow I'm not applying the jquery to the right element. My jsfiddle is here: http://jsfiddle.net/kevindp78/vexw5/2/ and code is below.

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')
});

推荐答案

代码中有几个问题要解决，所以让我们按顺序进行研究.

There are several problems to address in your code so let's go through them in order.

首先有$('up-button')，它缺少 . ，因此它不会选择按钮.

First there is $('up-button') it is missing the . so it won't select the buttons.

接下来，您将使用仅上一层的 parent() 方法，请使用

Next you are using the parent() method which only goes up one level, use parents('.leg') instead.

insertBefore() 是一种接受有关将所选内容放置在何处的目标的方法.

insertBefore() is a method that accepts a target as to where to place the content you selected.

previous()不是函数，它是 prev() ，并且不需要参数它只是选择上一个元素.

previous() isn't a function, it is prev() instead and it doesn't need a parameter as it just selects the previous element.

如果将所有这些修补程序结合在一起，将会得到类似的东西

If you combine all of those fixes you would get something like this

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

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

在此经过编辑的小提琴中演示了 http://jsfiddle.net/vexw5/6/

As demonstrated on this edited fiddle http://jsfiddle.net/vexw5/6/

这篇关于使用jQuery上下移动包含元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！