度假村在不同的ULs

Question

我一直在我的大腦周圍這一點，並不能找出解決方案。基本上我有套UI的，並希望重新排序的所有LIS在相同的結構：

<ul> 
    <li><span data-sort="-1">-1</span></li> 
    <li><span data-sort="10">10</span></li> 
</ul> 
<ul> 
    <li><span data-sort="4">4</span></li> 
    <li><span data-sort="7">7</span></li> 
</ul> 
<ul> 
    <li><span data-sort="5">5</span></li> 
</ul> 

我想這回是這樣的：

<ul> 
    <li><span data-sort="-1">-1</span></li> 
    <li><span data-sort="4">4</span></li> 
</ul> 
<ul> 
    <li><span data-sort="5">5</span></li> 
    <li><span data-sort="7">7</span></li> 
</ul> 
<ul> 
    <li><span data-sort="10">10</span></li> 
</ul> 

任何幫助預先感謝。謝謝。

Answer 1

事情是這樣的：

var uls = $('ul'), 
    lis = $('>li', uls); 
    ul = uls.empty().first(), 

lis.sort(function(a,b) { 
    return parseInt($(a).text(),10) > parseInt($(b).text(), 10); 
}).each(function(_,li) { 
    ul = ul.find('li').length > 1 ? ul.next() : ul; 
    ul.append(li) 
}); 

FIDDLE

Answer 2

我用稍微不同的方法。

我猜你想要比較排序數據屬性，所以我創建了一個比較它們的值的排序函數。然後它寫出一些自定義的html並且每隔兩個LI就打破列表。這可以在頂部進行調整。

function sortMe(a, b) { 
    return ($(a).find('span').data("sort") - $(b).find('span').data("sort")); 
} 

$li.sort(sortMe).each(function (i, el) { 
    //every two start a new list 
    if (n == numberInEach) { 
     str += "</ul><ul>"; 
     n = 0; 
    } 
    str += $(el).html(); 
    n++; 
}); 

Fiddle here

有性能的增強，你可以做，如移動數據的節點屬性到列表本身，而不是注入完整的元素，你可以只作內容等數組