Updated April 20, 2023
Definition of jQuery Array Sort
The jQuery array sort() function is used to sorts the elements of the array. This function is a built-in function in jQuery. This function sorts the array of a number, string, and object in ascending and descending order. The sort() function changes the position of the elements in the original array instead of returning the new sorted array. We can change the sorting order by providing the compare function to the array sort() function.
Syntax:
array.sort(compFun);Parameters:
- compFun – This is an optional parameter. It specifies the function name that is executed to define an alternative sort order. The compFun function returns the negative, positive, or zero value based on the condition.
- Return value – The return value of this function is an array that has sorted elements.
Working of the jQuery Array Sort() Function
The JQuery array sort() function accepts one parameter, the first parameter as the compare function. Suppose we have a list of numbers as “no = [ 51, 20, 64, 89, 45 ]”, now we need to sort the in descending order. So we can use the array sort() function as “no.sort( sortDesc )”, where sortDesc is the name of the function which sorts the elements according to the returned value (negative, positive, or zero). The new return array will be [89, 64, 51, 45, 20].
Examples
Example of jQuery array sort() function to sort the marks from a given array –
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array sort() function </title>
<style>
#p1 {
color: blue;
}
#p2 {
color: green;
}
#p3 {
color: red;
}
</style>
</head>
<body>
<h3> This is an Example for array sort() function : </h3>
<button onclick = "checkRes()" > Click here to get marks in ascending order. </button>
<p id = "p1"> </p>
<p id = "p2"> </p>
<p id = "p3"> </p>
<script>
var marks = [ 50, 78, 40, 89, 60, 57, 90 ];
function checkRes()
{
$( "#p1" ).text("The marks of an given array before sort() function is : " + marks);
var res = marks.sort();
$( "#p2" ).text("The marks of a new array after sort() function is : " + res);
$( "#p3" ).text("The marks of a original array after sort() function is : " + marks);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the array is created which contains marks of the students. Next, the sort() function is used to sort the array by using sort() function as “marks. sort();”, the sort() function by default sort array in ascending order, as we can see in the above output.
Example of jQuery array sort() function to sort the name of fruits based on the length from the given array –
Example #2
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array sort() function </title>
</head>
<body>
<h3> The Example for array sort() function : </h3>
<button onclick = "checkRes()" style = "background-color : green" > Click here to get fruits in ascending order based on length. </button>
<p id = "p1" > </p>
<p id = "p2" > </p>
<script>
var fruits = [ "Apple", "Orange", "Banana", "Cherry", "Plums" ];
function mySort(x, y)
{
return ((x.length < y.length) ? -1 : ((x.length > y.length) ? 1 : 0));
}
function checkRes()
{
$( "#p1" ).text("The fruits of an given array before sort() function is : " + fruits);
var res = fruits.sort(mySort);
$( "#p2" ).text("The fruits of a new array after sort() function is : " + fruits);
}
</script>
</body>
</html>An output of the above code is-
Once we click on the button, the output is –
In the above code, the array is created which contain some name of the fruits. Next, the array sort() function is used to sort the name of the fruits based on the length of the fruits word as “fruits.sort(mySort);”, where mySort() is a compare function that comparing elements on their length. The sorted array will be displayed once we click on the button, as we can see in the output.
Example to sort the object based on the key from the given object –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array sort() function </title>
</head>
<body>
<h3> The Example for array sort() function : </h3>
<button onclick = "checkRes()" style = "background-color : green" > Click here to get an object in descending order by key. </button>
<p id = "p1" > </p>
<p id = "p2" > </p>
<script>
var obj = [ { sub: 3, Name: "JavaScript" },
{ sub: 2, Name: "CSS" },
{ sub: 4, Name: "jQuery" },
{ sub: 1, Name: "Java" } ];
// sort By Key Desc order
function mySort(a, b)
{
var x = a.sub;
var y = b.sub;
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
}
function checkRes()
{
$( "#p1" ).text("The object before sort() function is : " + JSON.stringify(obj));
var res = obj.sort(mySort);
$( "#p2" ).text("The object after sort() function is : " + JSON.stringify(obj));
}
</script>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the object is created which contain some subject number and name as key value pair respectively. Next, the sort() function is used to sort the object by using the array sort() function as “obj.sort(function(x,y){return ((x.sub > y.sub) ? -1 : ((x.sub < y.sub) ? 1 : 0))});”. As we can see in the output, the object is sort in descending order by the key.
Conclusion
The jQuery array sort() function is a built-in function, which is used to sorts the elements of the given array by default in ascending order.
Recommended Articles
This is a guide to jQuery Array Sort. Here we discuss the description, Working of the jQuery Array Sort() Function examples with code implementation respectively. You may also have a look at the following articles to learn more –
