Курортные LIs в разных ULs

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

Скрипка здесь

Вы можете повысить производительность, например, переместить атрибут данных вверх по узлу в сам список и вместо внедрения полного элемента, вы можете просто создать массив содержимого и т. Д.