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

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

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

度假村LI在不同的UL

2 个答案: