javascript - 根据数组排序

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 顺序。

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() 它回来。