How to sort element by numerical value of data attribute using JavaScript ?
Last Updated :
02 Mar, 2020
The task is to sort numeric data attribute, there are many ways to sort the HTML elements by the numerical value of data-attributes with the help of JavaScript. In this article, we will explain popular and less time-consuming ones.
Example 1: First, select the outer element(var outer). Get children of outer element by using .find() method and apply sort() method on children of outer. Return the difference between 2 elements by accessing their property by el.dataset.percentage property.
- Program:
<!DOCTYPE HTML>
<html>
<head>
<title>
Sort element by numerical value
of data attribute with JavaScript
</title>
<script src=
</script>
<style>
.outer {
width: 200px;
}
.child {
margin: 10px;
}
h1 {
color: green;
}
#geeks {
color: green;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<center>
<h1>
GeeksforGeeks
</h1>
<b>
Click on button to perform operation
</b>
<br>
<div class="outer">
<div class="child"
data-percentage="34">34</div>
<div class="child"
data-percentage="61">61</div>
<div class="child"
data-percentage="17">17</div>
<div class="child"
data-percentage="49">49</div>
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<p id="geeks"></p>
<script>
var down = document.getElementById('geeks');
// Main function
function GFG_Fun()
{
var $wrap = $('.outer');
$wrap.find('.child').sort(function(a, b)
{
return +a.dataset.percentage -
+b.dataset.percentage;
})
.appendTo($wrap);
down.innerHTML = "Elements sorted";
}
</script>
</center>
</body>
</html>
|
- Output:
Example 2: First, select the outer element(var outer). Get children of outer by .find() method and apply sort() method on children of outer. Return the difference between 2 elements by accessing their property by el.getAttribute(‘data-percentage’) .
Program:
<!DOCTYPE HTML>
<html>
<head>
<title>
Sort element by numerical value
of data attribute with JavaScript
</title>
<script src=
</script>
<style>
.outer {
width: 200px;
}
.child {
margin: 10px;
}
h1 {
color: green;
}
#geeks {
color: green;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body id="body">
<center>
<h1>
GeeksforGeeks
</h1>
<b>
Click on button to perform operation
</b>
<br>
<div class="outer">
<div class="child"
data-percentage="34">34</div>
<div class="child"
data-percentage="61">61</div>
<div class="child"
data-percentage="17">17</div>
<div class="child"
data-percentage="49">49</div>
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<p id="geeks"></p>
<script>
var down = document.getElementById('geeks');
// Main function
function GFG_Fun()
{
var $wrap = $('.outer');
$wrap.find('.child').sort(function(a, b)
{
return + a.getAttribute('data-percentage') -
+b.getAttribute('data-percentage');
})
.appendTo($wrap);
down.innerHTML = "Elements sorted";
}
</script>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...