如何通过数据属性对HTML元素进行排序

在本文中，让我们看看如何使用数据属性对HTML元素进行排序。

我们可以使用数据属性对HTML元素（如列表或其他任何元素）进行排序。数据属性由两部分组成，前缀和后缀。前缀”data-“是必需的，而后缀”data-“可以是任何自定义名称，与元素中的数据相关，并且至少应该是一个小写字符。可以通过数据集属性来访问数据。

语法：

data-anysuffix

在本文中，我们使用包含要对元素进行排序的变量值的数据属性来对无序列表元素进行排序。

示例1: 根据数据属性中的主题，对主题和其相关话题进行排序和分组。

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>

输出： 单击按钮后，根据HTML元素的data-attribute对数据进行了排序，并且重新排列后的列表显示在输出中。

如何通过数据属性对HTML元素进行排序

示例2： 根据列表的数据属性对整数进行排序：

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>