How to sort element by numerical value of data attribute using JavaScript ?

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
<!DOCTYPE HTML><html>  <head>    <title>        Sort element by numerical value         of data attribute with JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
<!DOCTYPE HTML><html>  <head>    <title>        Sort element by numerical value         of data attribute with JavaScript    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.