Question

我有<ul>中的项目列表：

<li data-number="1"> Pierce </li>
<li data-number="2"> Annie </li>
<li data-number="3"> Jeff </li>
<li data-number="4"> Abed </li>
<li data-number="5"> Britta </li>

实际上，真实数据的列表要长得多，但请耐心等待。如您所见，<li>元素按数字顺序列出。但是，我需要重新排列它们以适合数组中的指定顺序：

Array(2, 3, 1, 5, 4)

我该怎么做？如果按上面的数组排序，则元素应如下所示：

<li data-number="2"> Annie </li>
<li data-number="3"> Jeff </li>
<li data-number="1"> Pierce </li>
<li data-number="5"> Britta </li>
<li data-number="4"> Abed </li>

这看起来很简单，但我查阅了书中的每个jQuery方法，我无法弄清楚如何做到这一点。非常感谢您提前帮助。

进一步澄清：

指定的订单是动态的。但是，元素最初始终按数字顺序列出。

Answer 1

从索引1开始迭代数组。然后在前一个元素之后追加该项。就是这样。

http://jsfiddle.net/jT8Tt/

var order = [2, 3, 1, 5, 4];

for (var i = 1; i < order.length; i++) {
    $('li[data-number="' + order[i] + '"]').insertAfter($('li[data-number="' + order[i - 1] + '"]'));
}

或者稍微可读的格式

for (var i = 1; i < order.length; i++) {
    var curElem = $('li[data-number="' + order[i] + '"]');
    var prevElem = $('li[data-number="' + order[i - 1] + '"]');
    curElem.insertAfter(prevElem);
}

Answer 2

这有点粗糙，因为我不确定你的整个过程，但我会给你一个要点，你可以实现它。

如果密钥是预定义的......

var sort_order = ['2', '3', '1', '5', '4']
$.each(sort_order function(key,value){

   // build you list here you can use the value from your sort_order
  // to match the data-number and print them out in the order of your choosing.
  // this will work if you dynamically create the sort_order as well.
});

$ .each函数将通过sort_order数组工作，允许您定义订单。

Answer 3

有点晚了，但我已经写了这个，所以浪费它似乎是一种耻辱：

var newOrder = ['2', '3', '1', '5', '4'],
    $ul = $("ul"),
    $lis = $ul.children().remove();

$.each(newOrder, function(key,val){
    $ul.append($lis.filter('[data-number="' + val+ '"]'));
});

演示：http://jsfiddle.net/zgD3n/

将元素排序为指定的数据 - *顺序

进一步澄清：

3 个答案: