Skip to content
Related Articles

Related Articles

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:
  • full-stack-img




    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :