Question

首先，我很抱歉我无法解释我的英语不好的情况。这实际上是我需要做的。我有一个如下列表，

<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重命名/重新排序为Ascending，与列表的当前顺序相同。这意味着

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

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

Answer 1

是的，您可以使用许多支持的事件中的任何一个来执行此操作。对于此示例，我将使用stop：

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

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

Answer 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>

如何使用jquery .sortable（）根据当前位置重命名列表ID？

2 个答案: