How to sort HTML elements by data-attribute ?

Last Updated : 30 Jul, 2024

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.