Skip to content
Related Articles

Related Articles

How to sort HTML elements by data-attribute ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 30 Jun, 2021
Improve Article
Save Article

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:
 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!