patternjavascriptMinor
Sorting numeric <LI> tags without omitting the attributes
Viewed 0 times
sortingwithoutthenumerictagsattributesomitting
Problem
I used the following Javascript to sort an unnumbered list of numeric li-tags as follows:
If a HTML-code is given with a list as such:
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
// 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.
1) You may benefit from using a documentFragment to build up your elements then submit them all at once to the
2) (micro), cache the length of your array in the for loop.
Otherwise I do not see any issues with this code. http://jsfiddle.net/rlemon/faY3Z/
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
nList2) (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.