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,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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:
    http://www.global-energy.nl
    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,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice