HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Sorting numeric <LI> tags without omitting the attributes

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
sortingwithoutthenumerictagsattributesomitting

Problem

I used the following Javascript to sort an unnumbered list of numeric li-tags as follows:

// 1. get the -element from the BODY
var nList = document.getElementById("allItems");
// 2. extract all the -elements from that  and put it in a NodeList
var nEntry = nList.getElementsByTagName('li');

// 3. we can't sort a NodeList, so first make it an Array
var nEntryArray = Array.prototype.slice.call(nEntry, 0);

// 4. sort the array, the normal sort()-function won't do because it is an alphabetical sort
// to sort() numeric values, see http://www.w3schools.com/jsref/jsref_sort.asp example, as "Default sort order is alphabetic and ascending. When numbers are sorted alphabetically, "40" comes before "5".  To perform a numeric sort, you must pass a function as an argument when calling the sort method."
// the numeric value of the  nodes can be located in nEntryArray[i].firstChild.nodeValue , so compare those

nEntryArray.sort(function(a,b){
  return a.firstChild.nodeValue - b.firstChild.nodeValue
})

// 5. empty the nList and refill it with those in the correct order at the nEntryArray
while (nList.lastChild)
{
  nList.removeChild(nList.lastChild);
}

for (i=0; i<nEntryArray.length; i++)
{
  nList.appendChild(nEntryArray[i]);
}


If a HTML-code is given with a list as such:


    100 
    10 
    1 
    20 
    16 


it will order the list numerically without omitting the attributes of the ``-tags.

It is one of my first JavaScript-attempts, and I was wondering if this is indeed correct or whether it could be simplified. Especially the conversion from Nodelist to Array seems redundant to me, but I haven't found a more gracious solution.

I post this code-block as I was looking on StackOverflow and through Google for a piece of code to help me solve this particular problem, but I couldn't find something that was understandable to a beginner like me. I easily found ways to sort lists , but then the attributes would be omitted and in the end it took me two days (y

Solution

There are a few clear improvements I can see when you are reinserting the nodes back into the DOM tree.

for (i=0; i<nEntryArray.length; i++)
{
  nList.appendChild(nEntryArray[i]);
}


1) You may benefit from using a documentFragment to build up your elements then submit them all at once to the nList

2) (micro), cache the length of your array in the for loop.

var df = document.createDocumentFragment();
for( var i = 0, l = nEntryArray.length; i < l; i++) {
    df.appendChild(nEntryArray[i]);
}
nList.appendChild(df);


Otherwise I do not see any issues with this code. http://jsfiddle.net/rlemon/faY3Z/

Code Snippets

for (i=0; i<nEntryArray.length; i++)
{
  nList.appendChild(nEntryArray[i]);
}
var df = document.createDocumentFragment();
for( var i = 0, l = nEntryArray.length; i < l; i++) {
    df.appendChild(nEntryArray[i]);
}
nList.appendChild(df);

Context

StackExchange Code Review Q#15144, answer score: 2

Revisions (0)

No revisions yet.