Sort and split a list of list items using JavaScript / jQuery

Question

I have a question Sorting a list (you can use the default JS / jquery sorting functions) Divide the sorted list into different sub-lists with the maximum number of elements "x" each, "x" is the parameter that you pass. the sample result takes x = 2

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

Write a function to convert this value to

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

Feel free to use any libraries / links that you like reasonably (i.e. don't use a library with splitList function). The key is to do this as efficiently as possible in terms of manipulating the DOM.

I solved this issue by creating a separate list and deleting the original, but I wonder how we can do this only by changing the existing one. (I mean a change on the fly while passing)

Answer 1

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 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

The most efficient sorting method is to use the native Array.sort method ( jQuery().sort implements Array.sort ). Fiddle: http://jsfiddle.net/RJEJQ/1/ .

The code can become even more efficient by getting rid of jQuery and using document.createElement() and regular for() loops.

 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. 

As you can see in this demonstration , the result is as follows:

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

Answer 4

This partly uses the answer that I wrote before, divides the elements into groups , adding their sorting first:

  Working demo: http://jsfiddle.net/AndyE/QVRRn/ 

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

It is very important to detach the <li> elements from the document before manipulating them, this will make the operation much faster on large sets.

Answer 5

If you need to manipulate the DOM, I believe that your question has been answered. But...

DOM manipulation slow . String concatenation as well .

The sorting function was taken here: How to sort the list alphabetically using jQuery?

Live demo: http://jsfiddle.net/gknjQ/1/