0

我一直在为此绞尽脑汁，无法找到解决方案。基本上，我有一组 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>

提前感谢任何帮助。谢谢。

4

2 回答 2

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

小提琴

于 2013-09-30T16:07:56.460 回答
0

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

我猜你想比较排序数据属性，所以我创建了一个比较它们的值的排序函数。然后它会写出一些自定义 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++;
});

在这里提琴

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

于 2013-09-30T16:21:21.870 回答