Sort and separate a set of list elements using JavaScript/jQuery

Question

I have a question Sort the list (you can use default JS/jquery sorting functions ) Break the sorted list apart into different sub-lists with a maximum of 'x' items each, 'x' being a parameter you pass in. The above sample result assumes x=2

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

Write a function to convert that 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/references you like within reason (i.e., don't use a library which has a "splitList" function). The key is to do this as efficiently as possible in terms of DOM manipulation.

i solved this question by creating separate list and deleted the original but I am wondering how can we do it by only modifying the existing one.(I mean modify on the fly while traversing)

FoRever_Zambia · Accepted Answer · 2011-11-10 09:55:42Z

1

html first:

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

edited Nov 10, 2011 at 9:55

answered Nov 10, 2011 at 9:41

FoRever_Zambia

1,1699 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

run · Accepted Answer · 2011-11-10 09:59:51Z

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>

Rob W · Accepted Answer · 2011-11-10 10:07:53Z

1

The most efficient method to sort is by using the native Array.sort method (jQuery().sort implements the 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 ordinary 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 seen at this demo, the result looks like:

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

edited Nov 10, 2011 at 10:07

answered Nov 10, 2011 at 9:59

Rob W

350k87 gold badges811 silver badges683 bronze badges

1 Comment

Rob W Over a year ago

Note: Change i%2 by i%3 if you want to display three list items per <ul>.

Community · Accepted Answer · 2017-05-23 12:21:11Z

1

This partially uses an answer I wrote before that divides elements into groups, with the addition of sorting them 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's important to detach the <li> elements from the document before manipulating them, this will make the operation much faster on large sets.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Nov 10, 2011 at 10:52

Andy E

346k86 gold badges482 silver badges452 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:11:33Z

0

If you must have to manipulate DOM, I believe your question was answered. But...

DOM manipulation is slow. Concatenate strings also.

The sort function was taken from here: How may I sort a list alphabetically using jQuery?

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

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Nov 10, 2011 at 10:35

Frias

11.4k9 gold badges36 silver badges40 bronze badges

Collectives™ on Stack Overflow

Sort and separate a set of list elements using JavaScript/jQuery

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related