IntroductionThe JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements. ImplementationLet’s create simple web application and add JQuery library within page under header section as like below, <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script> And then add JavaScript code to sort elements within Array using JQuery. How to Sort String Element?1. Ascending Order <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to sort Elements in Array Using JQuery</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var elements = ["RRaveen", "John", "Jana", "Abhji", "Dhan"];
$("#main1").html(elements.join("<br/>"));
elements = elements.sort();
$("#main1").append("<p>Sorted Elements</p>");
$("#main2").html(elements.join("<br/>"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main1">
</div>
<div id="main2">
</div>
</form>
</body>
</html>Output 2. Descending Order <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to sort Elements in Array Using JQuery</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var elements = ["RRaveen", "John", "Jana", "Abhji", "Dhan"];
$("#main1").html(elements.join("<br/>"));
elements = elements.sort();
elements = elements.reverse();
$("#main1").append("<p>Sorted Elements in Descending Order</p>");
$("#main2").html(elements.join("<br/>"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main1">
</div>
<div id="main2">
</div>
</form>
</body>
</html>Output How to Sort Numeric Elements?<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to sort Elements in Array Using JQuery</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var elements = [23, 13, 100, 187, 34, 98];
$("#main1").html(elements.join("<br/>"));
elements = elements.sort(function(a, b) {
return a - b;
});
$("#main1").append("<p>Sorted numeric Elements</p>");
$("#main2").html(elements.join("<br/>"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main1">
</div>
<div id="main2">
</div>
</form>
</body>
</html>Output That's cool and easy way to sort elements in client side. Live Demosort elements in array ConclusionIn this article, you have learned how sort to elements within array by ascending and descending order for string and numeric types. Hopes help and thank you for reading. |