我可以使用 jQuery 轻松地向上或向下移动 li 元素吗？答案

【问题标题】：Can I use jQuery to easily shift li elements up or down?我可以使用 jQuery 轻松地向上或向下移动 li 元素吗？
【发布时间】：2009-09-28 02:26:09
【问题描述】：

我有一个这样的菜单：

    <ul id="menu" class="undecorated"> 
        <li id="menuHome"><a href="/">Home</a> </li> 
        <li id="menuAbout"><a href="/Usergroup/About">About</a> </li> 
        <li id="menuArchives"><a href="/Usergroup/Archives">Archives</a> </li> 
        <li id="menuLinks"><a href="/Usergroup/Links">Links</a> </li> 
    </ul>

有没有一种简单的方法可以使用 jquery 重新排序元素？我在想象这样的事情：

$('#menuAbout').moveDown().moveDown()

但任何其他实现此目的的方式都值得赞赏。

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

其实没那么难。 JQuery 几乎可以通过 insertBefore 和 insertAfter 方法让您自己到达那里。

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

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

你可以像这样使用这些

moveDown($('#menuAbout'));

并且 menuAbout 项目会向下移动。

如果你想扩展 jQuery 以包含这些方法，你可以这样写：

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

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

现在你可以调用像

这样的函数了

$("#menuAbout").moveDown();

【讨论】：

为什么对每个变量都使用$variable，而不仅仅是变量？并不是说它是无效的语法——它只是多余的。
是的。但它也提醒我，我正在处理 jQuery 对象而不是常规变量/DOM 对象。

【解决方案2】：

没有原生的原型方法，但你可以很容易地制作一个：

$.fn.moveDown = function() {
    return this.each(function() {
        var next = $(this).next();
        if ( next.length ) {
            $(next).after(this);
        } else {
          $(this).parent().append( this );
        }
    })
}

$('#menuAbout').moveDown().moveDown()

这里使用jQuery.prototype.after

【讨论】：

您可以通过复制函数并将 'after' 替换为 'before' 和 'append(this)' 替换为 'prepend(this)' 来实现 moveUp。

【解决方案3】：

您也可以在父级上使用display: flex，然后您可以使用order

function reset()
{
  jQuery("#a").css("order", 10);
  jQuery("#b").css("order", 20);
  jQuery("#c").css("order", 30);
}

function reorder1()
{
  jQuery("#a").css("order", 30);
  jQuery("#b").css("order", 20);
  jQuery("#c").css("order", 10);
}

function reorder2()
{
  jQuery("#a").css("order", 30);
  jQuery("#b").css("order", 10);
  jQuery("#c").css("order", 20);
}

#main { display: flex; }
#a { color: red; }
#b { color: blue; }
#c { color: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
    <div id="a">Foo</div>
    <div id="b">Bar</div>
    <div id="c">Baz</div>
</div>

<button onclick="reset()">Reset</button>
<button onclick="reorder1()">Reorder 1</button>
<button onclick="reorder2()">Reorder 2</button>

【讨论】：

当我发布问题时，这不是一件事，但是是的！现在可以了。