How to Sort Items Using jQuery

, , Leave a comment

There are lots of 3rd party plug-in for sorting function out there in the web. But if you go to 3rd party plug-ins you need to include more javascript file in a page. Using jQuery you can easily sort the html elements. Today I will show how to sort items using jQuery.

For example You have an unordered list consisting of a few list items, which you want to sort.

First we will start with the markup

<div>  <ul>  <li>jQuery</li>  <li>Web Development</li>  <li>CSS</li>  <li>User Interface</li>  <li>Web Design</li>  </ul>  </div>


I have created a  "sort.js" file into "js" folder. All of our jQuery code will go into this javascript file.

Download the Followings:


<title>jQuery Sort</title>  <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>  <script src="js/sort.js" type="text/javascript"></script>  <link href="css/style.css" rel="stylesheet" type="text/css" />  </head>


Now we are going to add our java script into the "sort.js" file. Add the following code into sort.js file file.

$(document).ready(function() {  var menu = $('ul').children('li').get();  menu.sort(function(a, b) {  var val1 = $(a).text().toUpperCase();  var val2 = $(b).text().toUpperCase();  return (val1 < val2) ? -1 : (val1 > val2) ? 1 : 0;  });  $.each(menu, function(index, row) {  $('ul').append(row);  });  });


First get all the list items that are children of the unordered list and store them in a variable Menu. We then invoke the .sort() function on the menu array, which repeatedly takes two elements of the array at a time and assigns them to its parameters a and b for comparison.

Before we invoke the sorting algorithm, we convert the two array elements passed to the sort function to uppercase. We then use the sorting algorithm to return the values in the bulleted list, which will sort the list items in alphabetical (ascending) order.

Finally, the each() function operates on the array menu (that contains sorted list items); we extract each element stored in the array and append it to the unordered list element.

Styling with CSS

div{  width:200px;  }  #menu {  padding:0;  margin:0;  }  #menu li {  list-style-type:none;  height:20px;  background-color:#261f19;  color:#ff5107;  padding:5px;  border-bottom:dotted 1px #FFF;  }


Final HTML Code

<div>  <ul id="menu">  <li>jQuery</li>  <li>Web Development</li>  <li>CSS</li>  <li>User Interface</li>  <li>Web Design  </li>  </ul>  </div>


The final Result


Sorting a HTML Table


<table width="200" border="0" cellspacing="0" cellpadding="0">  <tbody>  <tr>  <td>jQuery</td>  </tr>  <tr>  <td>Web Development</td>  </tr>  <tr>  <td>CSS</td>  </tr>  <tr>  <td>User Interface</td>  </tr>  <tr>  <td>Web Design </td>  </tr>  </tbody>  </table>


jQuery Code

var menu1 = $('tbody').children('tr').get();  menu1.sort(function(a, b) {  var val1 = $(a).text().toUpperCase();  var val2 = $(b).text().toUpperCase();  return (val1 < val2) ? -1 : (val1 > val2) ? 1 : 0;  });  $.each(menu1, function(index, row) {  $('tbody').append(row);  });  });


Styling with CSS

tbody tr{  background:#261f19;  }  tbody td{  color:#ff5107;  padding:5px;  border-bottom:dotted 1px #FFF;  }


Final Result

Share this: