1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Sorting A Un-Ordered List (UL) Using JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Nov 20, 2006.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    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:
    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:
    <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>
     
  2. Energy Recruitment

    Energy Recruitment New Member

    Joined:
    Sep 12, 2008
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    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.
     
  3. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,646
    Likes Received:
    86
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    What are you talking about?
     
  4. gkumar

    gkumar New Member

    Joined:
    Jun 16, 2009
    Messages:
    58
    Likes Received:
    5
    Trophy Points:
    0
    In above coding Sorting A Un-Ordered List (UL) Using JavaScript

     
  5. dicentiu

    dicentiu New Member

    Joined:
    Sep 20, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    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]);
      			
      		}
    }
     
  6. zulfiqarali.19

    zulfiqarali.19 New Member

    Joined:
    Sep 12, 2010
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0

Share This Page