Question

我在基于数组的排序方面遇到了问题。让我们说我有这样的事情：

HTML：

<button onClick="sortfunc();">Sort</button>
<ul id="sortable">
  <li id="a">is </li>
  <li id="b">awesome</li>
  <li id="c">very </li>
  <li id="d">javascript </li>
  <li id="e">hard </li>
  <li id="f">but </li>
</ul>

现在我想使用外部按钮对其进行排序，并将最终值排序等于d a c e f b b。

使用Javascript：

$(function() {
    $( "#sortable" ).sortable();
});
function sortfunc() {
    var idsInOrder = $("#sortable").sortable("toArray");
        console.log(idsInOrder);
        //Print: ["a", "b", "c", "d", "e", "f"]
    var sorttoarray = ["d","a","c","e","f","b"];
    //Do something here to sort the ul li to match sorttoarray

}

我打印出阵列，但它不按预期顺序排列。是否可以使用外部按钮将上述可排序的内容排序为指示的ID？

编辑所以id以字母开头。

Answer 1

以下是如何实现这一点（我已经对HTML进行了一些修改，因为您不需要jQuery UI可排序功能）：

<button id="doSomething">Sort</button>
<ul id="sortable">
  <li id="1">is </li>
  <li id="2">awesome</li>
  <li id="3">very </li>
  <li id="4">javascript </li>
  <li id="5">hard </li>
  <li id="6">but </li>
</ul>

这是我的JavaScript：

function sortfunc() {
    var liItems = $("#sortable li");
    var sorttoarray = ["4","1","3","5","6","2"];

    $("#sortable").empty();

    for (var i = 0; i < sorttoarray.length; i++) {
        $("#sortable").append(liItems.filter("#" + sorttoarray[i]));
    }
}

$("#doSomething").click(function () {
    sortfunc(); 
});

这是工作的jsfiddle：http://jsfiddle.net/odmrxwxr/

最后我在这里做的就是保存li元素，清空父ul，然后遍历数组以获取订单，当我到达下一个应该在的元素时订单，我只是append()回来了。

基于数组排序

1 个答案: