如何使用 jquery .sortable() 根据当前位置重命名列表 ID？答案

【问题标题】：How to rename list ids according to current position using jquery .sortable()?如何使用 jquery .sortable() 根据当前位置重命名列表 ID？
【发布时间】：2014-10-02 08:42:02
【问题描述】：

首先很抱歉，我无法解释我糟糕的英语的情况。这实际上是我需要做的。我有一个清单如下，

<ul id="sortable" class="sortable">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
</ul>

列表 ID 和它们的值是相同的。通常，如果我使用 jquery sortable 将列表 ID 4 移动到顶部，那么我会得到新列表，

<ul id="sortable" class="sortable">
    <li id="4">4</li>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>    
    </ul>

但是我需要做的是将 ID 重命名/重新排序为升序，就像当前的列表顺序一样。这意味着

ID 4 => ID 1
ID 1 => ID 2
ID 2 => ID 3
ID 3 => ID 4

这是否可能使用 jQuery .sortable()。如果是这样，我将如何克服这个问题？非常感谢。

【问题讨论】：

即时更改ids 的整个想法听起来非常错误。
@MelanciaUK 感谢您的评论。如果是这样，是否可以像上面那样更改列表值而不是 Ids？谢谢
你肯定能做到。 @blgt 刚刚提供了一个答案。你只需要适应它。
请看不改变id的排序逻辑。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

是的，您可以使用许多受支持的事件中的任何一个来实现。对于这个例子，我将使用stop:

$(".sortable").sortable({
    stop: function(e, ui) {
        $(this).children("li").each(function(idx, elt) {
             $(elt).attr("id", idx);
        });
    }
});

但是请注意，这（更改 id-s）通常被认为是不好的做法，应该有一种方法可以让您在没有它的情况下实现您的结果。此外，如果您关心向后兼容性，请记住以数字开头的 id-s 不是 HTML4 标准的一部分。

【讨论】：

非常感谢您的回答。这解决了我的问题。因为据说这样做是一种不好的做法，所以我决定更改列表的值，而不是更改列表 ID。

【解决方案2】：

你可以这样排序

function sort_by_id(a, b) {
  var sa = a.id, sb = b.id;
  return sb>sa ? -1 : sb<sa ? 1 : 0;
}

function sortList(){
    var list = $("#sortable > li").get();
    list.sort(sort_by_id);
    for (var i = 0; i < list.length; i++) {
        list[i].parentNode.appendChild(list[i]);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" onclick="sortList()">Sort list</a>
  <ul id="sortable" class="sortable">
    <li id="4">4</li>
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>    
   </ul>

【讨论】：