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

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • Output:
  • full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.