Skip to content
Related Articles

Related Articles

Improve Article

How to sort HTML elements by data-attribute ?

  • Difficulty Level : Medium
  • Last Updated : 30 Jun, 2021
Geek Week

In this article let us see how we can sort HTML elements using data-attribute.

We can sort the HTML elements like lists or any other using the data attribute. The data attribute consists of 2 parts which are the prefix and suffix, the prefix data- is compulsory and the suffix of data- can be any custom name that relates the data in the elements, and it should be of at least one character of lowercase. The data can be accessed by the dataset property.

Syntax:

data-anysuffix 

In this article, we sort the unordered list elements using the data attribute with variable values on which the elements are to be sorted.

 



Example 1: Sorting and grouping the subjects and their topics based on subject as data attribute.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
         initial-scale=1.0">
  
    <style>
        h1 {
            color: green;
        }
  
        button {
            color: green;
            border-radius: 5px;
        }
    </style>
</head>
  
<!-- Whatever content in body tag 
    appears on the webpage-->
<body>
    <h1>GeeksforGeeks</h1>
    <hr>
  
    <ul id="list">
        <li class="subject" data-subject="Operating systems">
            Operating systems: Paging
        </li>
        <li class="subject" data-subject="DBMS">
            DBMS: E.R Modeling
        </li>
        <li class="subject" data-subject="Operating systems">
            Operating systems: Deadlock
        </li>
        <li class="subject" data-subject="Data Structures">
            Data Structures: Queue
        </li>
        <li class="subject" data-subject="Data Structures">
            Data Structures: Stack
        </li>
        <li class="subject" data-subject="Data Structures">
            Data Structures: Trees
        </li>
        <li class="subject" data-subject="DBMS">DBMS: SQL</li>
        <li class="subject" data-subject="Data Structures">
            Data Structures: Arrays
        </li>
        <li class="subject" data-subject="Operating systems">
            Operating systems: Segmentation
        </li>
        <li class="subject" data-subject="DBMS">
            DBMS: Queries
        </li>
        <li class="subject" data-subject="DBMS">
            DBMS: E.E.R Modeling
        </li>
        <li class="subject" data-subject="Operating systems">
            Operating systems: CPU scheduling
        </li>
        <li class="subject" data-subject="DBMS">
            DBMS: Normalization
        </li>
        <li class="subject" data-subject="Data Structures">
            Data Structures: Linked List
        </li>
    </ul>
  
    <!-- onclick event to sort data-->
    <button onclick="SortData()">
        Sort HTML elements by Data Attributes
    </button>
  
    <script>
        function comparator(a, b) {
            if (a.dataset.subject < b.dataset.subject)
                return -1;
            if (a.dataset.subject > b.dataset.subject)
                return 1;
            return 0;
        }
          
        // Function to sort Data
        function SortData() {
            var subjects =
                document.querySelectorAll("[data-subject]");
            var subjectsArray = Array.from(subjects);
            let sorted = subjectsArray.sort(comparator);
            sorted.forEach(e =>
                document.querySelector("#list").
                    appendChild(e));
        }
    </script>
</body>
  
</html>

Output: After clicking the button, the data got sorted based on data-attribute of HTML elements and the rearranged list appeared in the output.

Example 2: Sorting Integers based on data attributes of the list :

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!--Meta data-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
         initial-scale=1.0">
  
    <style>
        h1 {
            color: green;
        }
  
        button {
            color: green;
            border-radius: 5px;
        }
    </style>
</head>
  
<!-- Whatever content in body tag 
    appears on the webpage-->
<body>
    <h1>GeeksforGeeks</h1>
    <hr>
  
    <ul id="list">
        <li class="index" data-index="1">1 </li>
        <li class="index" data-index="5">5</li>
        <li class="index" data-index="2">2</li>
        <li class="index" data-index="3">3</li>
        <li class="index" data-index="4">4 </li>
    </ul>
      
    <!-- onclick event to sort data-->
    <button onclick="SortData()">
        Sort HTML elements by Data Attributes
    </button>
      
    <script>
        function comparator(a, b) {
            if (a.dataset.index < b.dataset.index)
                return -1;
            if (a.dataset.index > b.dataset.index)
                return 1;
            return 0;
        }
          
        // Function to sort Data
        function SortData() {
            var indexes = document.querySelectorAll("[data-index]");
            var indexesArray = Array.from(indexes);
            let sorted = indexesArray.sort(comparator);
            sorted.forEach(e =>
                document.querySelector("#list").appendChild(e));
        }
    </script>
</body>
  
</html>

Output:
 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up