用jquery向上和向下移动元素

感谢您提供任何帮助！目前，我使用一个用户可分类的代码来允许用户按顺序上下移动项目。现在，我想给每个这些项目提供一组“向上”和“向下”按钮，让用户只需点击一下即可上下移动项目。我试着返工论文的职位，但我似乎失去了一些东西明显...用jquery向上和向下移动元素

jQuery Sortable Move UP/DOWN Button move up/down in 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>

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

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

来源

2013-03-18 KDP

缺少分号的错别字正确的证明？ – lifetimes 2013-03-18 20:05:25

在代码中有几个问题需要解决，所以让我们按顺序进行处理。

首先有$('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()); 
});

作为此编辑小提琴http://jsfiddle.net/vexw5/6/

来源

2013-03-18 20:22:06 BeardFist

虽然这不是第一个回应，但它是最丰富和详细的，所以我可以知道我出错的地方（并且有很多东西需要学习！）谢谢@BeardFist。 – KDP 2013-03-18 21:41:58

完美的作品。感谢您的优雅和简洁的解决方案！ +1 – 2015-03-05 11:40:24

你可以尝试这样的事情更换您的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/

这只是基础知识。没有动画或任何东西。

来源

2013-03-18 20:17:39 Ryan

我给了@BeardFist正确的答案，因为它提供了更多关于我所犯的错误的细节。我也非常感谢你的解决方案;感谢您花时间帮助我。 – KDP 2013-03-18 21:42:58

用jquery向上和向下移动元素

回答

相关问题