Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Sorting A Un-Ordered List (UL) Using JavaScript (http://www.go4expert.com/articles/sorting-list-ul-using-javascript-t1947/)

pradeep 20Nov2006 13:46

Sorting A Un-Ordered List (UL) Using JavaScript
 
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>


Energy Recruitment 13Sep2008 02:00

Re: Sorting A Un-Ordered List (UL) Using JavaScript
 
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.

pradeep 13Sep2008 10:37

Re: Sorting A Un-Ordered List (UL) Using JavaScript
 
What are you talking about?

gkumar 19Jun2009 15:58

Re: Sorting A Un-Ordered List (UL) Using JavaScript
 
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>

dicentiu 20Sep2011 14:24

Re: Sorting A Un-Ordered List (UL) Using JavaScript
 
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]);
                         
                  }
}


zulfiqarali.19 24Sep2011 02:30

Re: Sorting A Un-Ordered List (UL) Using JavaScript
 
very nice


All times are GMT +5.5. The time now is 10:03.