Sorting A Un-Ordered List (UL) Using JavaScript

pradeep's Avatar author of Sorting A Un-Ordered List (UL) Using JavaScript
Contributed by ()
This is an article on Sorting A Un-Ordered List (UL) Using JavaScript in JavaScript and AJAX.
Sometimes we need a sorted UL (un-ordered list) in a static page, like a blog, we can use JavaScript to the sort the list.
I faced a similar problem with my blog, so I implement a simple bubble sort on the list, the list will be sorted if the browser supports JavaScript, else it will still display the unsorted list.

The JavaScript
Code: JavaScript
function sortList(listId)
  {
      // Get the ul object
      var oUl = document.getElementById(listId);
      /* Perform a Bubble Sort on the list items */
      for(var i in oUl.childNodes)
      {
          var x = oUl.childNodes[i];
          for(var j in oUl.childNodes)
          {
              var y = oUl.childNodes[j];
              if((x.innerText != 'undefined' || y.innerText != 'undefined')  && x.innerText>y.innerText)
              {
                  // Skip if x is already the first list item
                  if(oUl.firstChild!=x)
                      oUl.insertBefore(y,x);
              }
          }
      }
          
  }
  
  /* Define innerText for Mozilla based browsers */
  if((typeof HTMLElement != 'undefined') && (HTMLElement.prototype.__defineGetter__ != 'undefined'))
  {
      HTMLElement.prototype.__defineGetter__("innerText", function (){
      var r = this.ownerDocument.createRange();
      r.selectNodeContents(this);
      return r.toString();
      }); 
  
  }

The Whole HTML:
HTML Code:
<HTML>
  <HEAD>
  <TITLE> New Document 
  <META NAME="Author" CONTENT="Pradeep">
  <script>
  function sortList(listId)
  {
  	// Get the ul object
  	var oUl = document.getElementById(listId);
  	/* Perform a Bubble Sort on the list items */
  	for(var i in oUl.childNodes)
  	{
  		var x = oUl.childNodes[i];
  		for(var j in oUl.childNodes)
  		{
  			var y = oUl.childNodes[j];
  			if((x.innerText != 'undefined' || y.innerText != 'undefined')  && x.innerText>y.innerText)
  			{
  				// Skip if x is already the first list item
  				if(oUl.firstChild!=x)
  					oUl.insertBefore(y,x);
  			}
  		}
  	}
  		
  }
  
  /* Define innerText for Mozilla based browsers */
  if((typeof HTMLElement != 'undefined') && (HTMLElement.prototype.__defineGetter__ != 'undefined'))
  {
  	HTMLElement.prototype.__defineGetter__("innerText", function (){
  	var r = this.ownerDocument.createRange();
  	r.selectNodeContents(this);
  	return r.toString();
  	}); 
  
  }
  
  
  window.onload=function()
  {
  	sortList("names");
  }
  </script>
  </HEAD>
  
  <BODY>
  <ul id="names">
  	<li>Pradeep</li>
  	<li>Asha</li>
  	<li>Manindar</li>
  	<li>Tanaz</li>
  </ul>
  </BODY>
  </HTML>
Newbie Member
13Sep2008,02:00   #2
Energy Recruitment's Avatar
Have you learned about for loops yet? That's the clean way to do it.

But if not, you can just print out arr[0], arr[1], and arr[2] the way you were printing out n1, n2, and n3.
Team Leader
13Sep2008,10:37   #3
pradeep's Avatar
What are you talking about?
Banned
19Jun2009,15:58   #4
gkumar's Avatar
In above coding Sorting A Un-Ordered List (UL) Using JavaScript

Quote:
<html>
<head>
<title>Input Output</title>

<script type="text/javascript">

var n1;
var n2;
var n3;

n1 = window.prompt( "Please enter the 1st integer: ", "0" );
n2 = window.prompt( "Please enter the 2nd integer: ", "0" );
n3 = window.prompt( "Please enter the 3rd integer: ", "0" );

document.write("You have entered <ol>" + n1 + ", " + n2 + ", " + n3 + "</ol>");

</script>

</body>

</html>
Newbie Member
20Sep2011,14:24   #5
dicentiu's Avatar
function sortList is not working well. this is not BubbleSort and when you call "insertBefore(y,x);", y and x are 2 variables not the list item you want. in JavaScript when you use "=" you are assigning a value not a reference.

instead, use this code:
Code:
 function sortList(listId)
  {
  	// Get the ul object
  	var oUl = document.getElementById(listId);
  	/* Perform a Bubble Sort on the list items */ 
  for (var i=0 ; i<oUl.childNodes.length - 1 ; i++)
         for (var j=i+1 ; j < oUl.childNodes.length ; j++)  
         {
         var x = oUl.childNodes[i];
         var y = oUl.childNodes[j];
  
  			if( (x.innerText != 'undefined') && (y.innerText != 'undefined')  && (x.innerText>y.innerText))
  			
  			oUl.childNodes[j].swapNode(oUl.childNodes[i]);
  			
  		}
}
Newbie Member
24Sep2011,02:30   #6
zulfiqarali.19's Avatar
very nice