Сортировка и разделение набора элементов списка с помощью JavaScript / jQuery

Question

У меня есть вопрос Сортировка списка (вы можете использовать функции сортировки JS / jquery по умолчанию) Разбейте отсортированный список на несколько подсписков с максимальным количеством элементов «x» каждый, где «x» является параметром, который вы передаетеПриведенный выше пример результата предполагает, что x = 2

<ul>
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
 </ul>

Напишите функцию для преобразования ее в

<ul>
    <li> 1 </li>
    <li> 3 </li>
</ul>
 <ul>
    <li> 4 </li>
    <li> 5 </li>
</ul>
<ul>
    <li> 7 </li>
</ul>

Не стесняйтесь использовать любые библиотеки / ссылки, которые вам нравятся, в пределах разумного (например, donне использовать библиотеку, которая имеет функцию "splitList").Ключ заключается в том, чтобы сделать это максимально эффективно с точки зрения манипулирования DOM.

Я решил этот вопрос, создав отдельный список и удалив оригинал, но мне интересно, как мы можем сделать это, только изменив существующий.(Я имею в виду изменение на лету при прохождении)

Answer 1

Это частично использует ответ, который я написал ранее, делит элементы на группы , с добавлением сортировки их сначала:

<b>Working demo: <a href="http://jsfiddle.net/AndyE/QVRRn/" rel="nofollow noreferrer">http://jsfiddle.net/AndyE/QVRRn/</a></b> 

var i   = 0,
    ul  = $("ul"), 
    lis = ul.children().detach(),
    group;

// Sort the elements
lis.sort(function (a, b) {
    return $.text(a).localeCompare($.text(b));
});

// Wrap the elements
while ((group = lis.slice(i, i += 2)).length)
    group.wrapAll('<ul></ul>');

// Replace the original UL element
ul.replaceWith(lis.closest("ul"));

Важно отсоединить <li> элементы из документа до манипулирования ими, это значительно ускорит работу на больших наборах.

Answer 2

var optionTexts = [];
        $("ul li").each(function() { optionTexts.push($(this).text()) });
        optionTexts.sort();
        //alert(optionTexts.length);
        var splityby = 2;//change this value how you want to split
        var itmes= parseInt(optionTexts.length/splityby);
        var remaining = optionTexts.length%splityby;
        //alert(itmes+'and'+remaining);
        var st='';
        var i=0;
        for(k=0;k<itmes+remaining;k++){
            st+='<ul>';
            for(j=0;j<splityby;j++){
                if(i<optionTexts.length){
                st+='<li>'+optionTexts[i++] +'</li>' ;
                }
            } 
            st+='</ul>';
        }
        $('#hi').append(st);

---

HTML

    <div id="hi"></div> 
<ul>    <li> 4 </li>    <li> 1 </li>    <li> 7 </li>    <li> 5 </li>    <li> 3 </li>  </ul>

Answer 3

Наиболее эффективный метод сортировки - это использование нативного метода Array.sort (jQuery().sort реализует Array.sort). Fiddle: http://jsfiddle.net/RJEJQ/1/.

Код может стать еще более эффективным, избавившись от jQuery и используя document.createElement() и обычные for() циклы.

var originalUl = $('ul');
var listElements = originalUl.children('li'); //List
listElements.sort(function(x, y){
    return parseInt(x.textContent, 10) - parseInt(y.textContent);
});
//Sorted by number, 1, 2, 3, ...

var newList = $(""); //Placeholder
listElements.each(function(i){
    if(i%2 == 0){ //If even, a new list has to be created
        originalUl.before(newList);
        newList = $("<ul>"); //Create new list

    }
    newList.append(this);
});
if(newList.length) { // If there are any remaining list elements in the holder.
    originalUl.before(newList);
}
originalUl.remove(); //Remove original, empty ul.

Как виднона это демо , результат выглядит так:

ul
    li 1
    li 3
ul
    li 4
    li 5
ul
    li 7

Answer 4

HTML сначала:

<ul id="list">
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
</ul>
<div id="container"></div>

javascript (jquery):

function sortText(a,b){  
    return $(a).text().trim() > $(b).text().trim() ? 1 : -1;  
};
var ul = $('#list');
var elements = ul.find('li').detach();
var i=2;
var lastul;
var container = $('#container');
elements.sort(sortText).each(function(index){
    if (index % i === 0) {
        container.append(lastul);
        lastul = $('<ul></ul>');
    }
    lastul.append(elements[index]);
})
container.append(lastul);
ul.remove();

Answer 5

Если вам нужно манипулировать DOM, я думаю, что на ваш вопрос был дан ответ.Но ...

манипулирование DOM равно медленно . Конкатенация строк также .

Отсюда взята функция сортировки: Как отсортировать список по алфавиту с помощью jQuery?

Демонстрация в реальном времени: http://jsfiddle.net/gknjQ/1/