如何使用 JavaScript 按数据属性的数值对元素进行排序？

任务是对数字数据属性进行排序，在 JavaScript 的帮助下，有多种方法可以通过数据属性的数值对 HTML 元素进行排序。在本文中，我们将解释流行且耗时较少的方法。

示例 1：首先，选择外部元素(var outer)。使用 .find() 方法获取外部元素的子元素，并对外部元素应用sort() 方法。通过 el.dataset.percentage property访问它们的属性，返回 2 个元素之间的差异。

• 程序：

    
  
      
          Sort element by numerical value 
          of data attribute with JavaScript
      
      
      
      
          .outer {
              width: 200px;
          }
            
          .child {
              margin: 10px;
          }
            
          h1 {
              color: green;
          }
            
          #geeks {
              color: green;
              font-size: 16px;
              font-weight: bold;
          }
      
  
    
  
      
    
           
            GeeksforGeeks 
          
          
            Click on button to perform operation
          
          
          
              34
              61
              17
              49
          
          
          
              click here
          
          
          
              var down = document.getElementById('geeks');
                
              // Main function
              function GFG_Fun() 
              {
                  var $wrap = $('.outer');
                  $wrap.find('.child').sort(function(a, b) 
                      {
                          return +a.dataset.percentage -
                              +b.dataset.percentage;
                      })
                      .appendTo($wrap);
                  down.innerHTML = "Elements sorted";
              }
          
      
  
    

• 输出：

示例 2：首先，选择外部元素(var outer)。通过 .find() 方法获取外部的孩子，并在外部的孩子上应用sort() 方法。通过 el.getAttribute(‘data-percentage’)访问它们的属性，返回 2 个元素之间的差异。

程序：

  

    
        Sort element by numerical value 
        of data attribute with JavaScript
    
    
    
    
        .outer {
            width: 200px;
        }
          
        .child {
            margin: 10px;
        }
          
        h1 {
            color: green;
        }
          
        #geeks {
            color: green;
            font-size: 16px;
            font-weight: bold;
        }
    

  

    
  
         
          GeeksforGeeks 
        
        
          Click on button to perform operation
        
        
        
            34
            61
            17
            49
        
        
        
            click here
        
        
        
            var down = document.getElementById('geeks');
              
            // Main function
            function GFG_Fun() 
            {
                var $wrap = $('.outer');
                $wrap.find('.child').sort(function(a, b) 
                {
                    return + a.getAttribute('data-percentage') - 
                    +b.getAttribute('data-percentage');
                })
                .appendTo($wrap);
                down.innerHTML = "Elements sorted";
            }
        
    

  

输出：