不同UL中的度假村LIs

Question

我一直在绞尽脑汁解决这个问题，但还是想不出解决方案。基本上，我有几组UL，并希望在相同的结构中重新排序所有的LI：

<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)
});

Answer 2

我使用了一种稍微不同的方法。

我猜您想要比较排序数据属性，所以我创建了一个排序函数来比较它们的值。然后写出一些自定义的html并每隔两个LI's中断列表，这可以在顶部进行调整。

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

您可以进行一些性能增强，例如将数据属性向上移动到列表本身，而不是注入完整的元素，您可以只创建内容的数组等。