如何按数据属性对 HTML 元素进行排序？

在本文中，让我们看看如何使用 data-attribute 对 HTML 元素进行排序。

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

句法：

data-anysuffix 

在本文中，我们使用 data 属性和变量值对无序列表元素进行排序，元素将根据这些变量值进行排序。

示例 1：根据主题作为数据属性对主题及其主题进行排序和分组。

HTML

  

    
    
    
    
  
    
        h1 {
            color: green;
        }
  
        button {
            color: green;
            border-radius: 5px;
        }
    

  


    GeeksforGeeks
    
  
    
        
            Operating systems: Paging
        
        
            DBMS: E.R Modeling
        
        
            Operating systems: Deadlock
        
        
            Data Structures: Queue
        
        
            Data Structures: Stack
        
        
            Data Structures: Trees
        
        DBMS: SQL
        
            Data Structures: Arrays
        
        
            Operating systems: Segmentation
        
        
            DBMS: Queries
        
        
            DBMS: E.E.R Modeling
        
        
            Operating systems: CPU scheduling
        
        
            DBMS: Normalization
        
        
            Data Structures: Linked List
        
    
  
    
    
        Sort HTML elements by Data Attributes
    
  
    
        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));
        }
    

  

输出：点击按钮后，数据根据 HTML 元素的数据属性进行排序，重新排列的列表出现在输出中。

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

HTML

  

    
    
    
    
  
    
        h1 {
            color: green;
        }
  
        button {
            color: green;
            border-radius: 5px;
        }
    

  


    GeeksforGeeks
    
  
    
        1 
        5
        2
        3
        4 
    
      
    
    
        Sort HTML elements by Data Attributes
    
      
    
        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));
        }
    

  

输出：