jquery - jQuery - 在加载时重新排序

Question

我有以下可排序的顺序作为默认值

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

但是假设用户将项目 3 移动到位置 1 然后我将其保存到数据库中，现在新位置是 3,1,2

当他们访问要编辑的页面时，我将新订单放入此 div

<div id="position">3,1,2</div>

但是我不知道如何在页面加载时使用来自 id="position" 的新位置重新排序可排序我已经查看了所有可排序的方法，但找不到执行此操作的方法。

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

Answer 1

试试这个：

var orderArray = $('#position').text().split(',');
var listArray = $('#sortable li');
for (var i = 0; i < orderArray.length; i++) {
   $('#sortable').append(listArray[orderArray[i]-1]);
}​

jsFiddle 示例。

Answer 2

如果项目 ID 是字母：

<ul id="sortable">
  <li id="a">Item a</li>
  <li id="b">Item b</li>
  <li id="c">Item c</li>
</ul>
<div id="position">c,a,b</div>

试试这个：

var orderArray = $('#position').text().split(',');
var str = '';
for (var i = 0; i < orderArray.length; i++) {
   str += '<li id="'+orderArray[i]+'">'+orderArray[i]+'</li>';
}​
$('#sortable').html(str);

它对我有用！