Javascript 上下移动Ul Li中的项目

我有一个Ul li，点击向上和向下按钮，我想移动以向上和向下移动li元素。 下面是页面上呈现的html

我已经尝试了链接中提到的解决方案，但对我无效

      <ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0">
    <li sequence="1" title="Category 1" class="liEllipsis" value="9"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li>
    <li sequence="2" title="Category 3" class="liEllipsis" value="11"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a></li>
    <li sequence="4" title="Category 4" class="liEllipsis" value="12"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a></li>
    <li sequence="5" title="Category 6" class="liEllipsis" value="22"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a></li>
    <li sequence="6" title="Category 5" class="liEllipsis" value="13"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a></li>
    <li sequence="7" title="Category 7" class="liEllipsis" value="55"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a></li>
<li sequence="99999" title="Category 8" class="liEllipsis" value="62"><a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a></li></ul>

您可以使用insertAfter（）查找序列/操作序列

在您的功能中，您应该执行以下操作

var previousObject = $(this).prev('li');
$(this).insertBefore(previousObject);


var nextObject = $(this).next('li');
$(this).insertAfter(nextObject);

没有测试。但这样做应该行得通。（这是单击的列表对象）

看看这个

使用此jQuery代码，在本例中我只是向下移动元素：

$.fn.moveUp = function() {
    before = $(this).prev();
    $(this).insertBefore(before);
}

$.fn.moveDown = function() {
    after = $(this).next();
    $(this).insertAfter(after);
}

$('li').click(function() {
    $(this).moveDown();
});

---

我刚刚从

中得到了一个示例，您可以尝试以下方法：

$('.upbutton').on('click', function () {
    var hook = $(this).closest('.liEllipsis').prev('.liEllipsis');
    var elementToMove = $(this).closest('.liEllipsis').detach();
    hook.before(elementToMove);
});
$('.downbutton').on('click', function () {
    var hook = $(this).closest('.liEllipsis').next('.liEllipsis');
    var elementToMove = $(this).closest('.liEllipsis').detach();
    hook.after(elementToMove);
});

如果要使用外部按钮和选定的li元素移动，请尝试以下操作：

$('.liEllipsis').on('click', function () {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.upbutton').on('click', function () {
    var $currentElement = $('#ul_li_SubCategories .selected');
    moveUp($currentElement);
});

$('.downbutton').on('click', function () {
    var $currentElement = $('#ul_li_SubCategories .selected');
    moveDown($currentElement);
});

var moveUp = function ($currentElement) {
    var hook = $currentElement.prev('.liEllipsis');
    if (hook.length) {
        var elementToMove = $currentElement.detach();
        hook.before(elementToMove);
    }
};

var moveDown = function ($currentElement) {
    var hook = $currentElement.next('.liEllipsis');
    if (hook.length) {
        var elementToMove = $currentElement.detach();
        hook.after(elementToMove);
    }
};

你可以试试这个

$（函数（）{
$（'.Glyph图标向上箭头'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var_this=$（this）；
var _parent=_this.closest（'ul'）；
var _child=$（_parent）.find（'li'）；
所选变量=$（this）.closest（'li'）.index（）；
jQuery（$（_parent.children（）.eq（selected-1））.before（jQuery（$（_parent.children（）.eq（selected））；
});
$（'.glyphion向下箭头'）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var_this=$（this）；
var _parent=_this.closest（'ul'）；
var _child=$（_parent）.find（'li'）；
所选变量=$（this）.closest（'li'）.index（）；
jQuery（$（_parent.children（）.eq（selected+1））.after（jQuery（$（_parent.children（）.eq（selected）））；
选定=选定+1；
});
})

样本1向上向下
样本2向上向下
样本3向上向下
样本4向上向下
样本5向上向下
样本6向上向下
样本7向上向下

这里是一个使用您提供的HTML标记解决您问题的普通JS解决方案

解决方案利用父级

上的

.insertBefore（）

方法向上或向下移动选定的

元素

通过使用事件对象跟踪单击的按钮来选择项目

---

我尝试了此链接，但可能与之重复。。但它对我不起作用。可能是我发布了一个答案的副本，带有一个工作代码，只需调用

yourElement.moveUp（）

或

yourElement.moveDown（）

，将其向上或向下移动即可down@GauravSachdeva请尝试我下面的代码片段，我想这是因为该事件是在单击按钮时发生的。。在这种情况下，“this”不是指按钮吗？是的。这是假设您的按钮在li内，因此我正在寻找最近的li，并移动它。不。。按钮不在同一个li中。它在一个完全不同的部门@Arathi SreekumarI附加了一个JSFIDLE，您可以用图标上下类替换我的上下按钮。如果它不在里面，那么请提供一个你想要实现的JSFIDLE。这不会再起作用了。。我的按钮位于不同的分区中。。所以我想我找不到最接近的。利耶利班。