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

Last Updated : 10 Oct, 2024

The task is to sort numeric data attributes, 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.

Examples of Sort Elements by Numerical Value

Example 1: Using Dataset Property

Select the parent container of the elements to be sorted. Use JavaScript’s sort() method on the child elements, comparing the values retrieved from the dataset property. Re-append the sorted elements to the parent container.

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: Using getAttribute() Method

This method involves accessing the data-percentage attribute using getAttribute().

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:

Using getAttribute() Method

How to Reset an Input Value when Limit Exceeds using AngularJS ?

PranchalKatiyar

Improve

Article Tags :

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

Examples of Sort Elements by Numerical Value

Example 1: Using Dataset Property

Example 2: Using getAttribute() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?