使用 jquery 上下移动包含元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15485859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move containing elements up and down with jquery
提问by KDP
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...
感谢您的任何帮助，您可以提供！目前，我使用 ui-sortable 代码来允许用户按顺序上下移动项目。现在，我想为这些项目中的每一个提供一组“向上”和“向下”按钮，允许用户通过单击上下移动项目。我试过修改这些帖子，但我似乎遗漏了一些明显的东西......
jQuery Sortable Move UP/DOWN Buttonmove up/down in jquery
jQuery Sortable Move UP/DOWN Button在jquery中向上/向下移动
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.
我想不知何故我没有将 jquery 应用于正确的元素。我的 jsfiddle 在这里：http: //jsfiddle.net/kevindp78/vexw5/2/代码如下。
HTML
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
JS
$('up-button').click(function(){
$(this).parent('.leg').insertBefore.previous('.leg')
});
$('.down-button').click(function(){
$(this).parent('.leg').insertAfter.next('.leg')
});
回答by BeardFist
There are several problems to address in your code so let's go through them in order.
在您的代码中有几个问题需要解决，所以让我们按顺序浏览它们。
First there is $('up-button')it is missing the .so it won't select the buttons.
首先是$('up-button')它丢失了.所以它不会选择按钮。
Next you are using the parent()method which only goes up one level, use parents('.leg')instead.
接下来，您将使用parent()仅上升一级的方法，请parents('.leg')改用。
insertBefore()is a method that accepts a target as to where to place the content you selected.
insertBefore()是一种方法，它接受关于放置您选择的内容的位置的目标。
previous()isn't a function, it is prev()instead and it doesn't need a parameter as it just selects the previous element.
previous()不是函数，prev()而是函数，它不需要参数，因为它只选择前一个元素。
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());
});
As demonstrated on this edited fiddle http://jsfiddle.net/vexw5/6/
正如这个编辑过的小提琴http://jsfiddle.net/vexw5/6/ 所示
回答by Ryan
You could try replacing your JS with something like this:
你可以尝试用这样的东西替换你的 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());
});
This is just the basics. There are no animations or anything.
这只是基础知识。没有动画或任何东西。
