如何按2个数据属性对div进行排序？

按照两个数据属性对div进行排序可以通过JavaScript来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="box" data-attr1="3" data-attr2="5">Box 1</div>
  <div class="box" data-attr1="1" data-attr2="2">Box 2</div>
  <div class="box" data-attr1="2" data-attr2="4">Box 3</div>
  <div class="box" data-attr1="4" data-attr2="3">Box 4</div>

  <script>
    var boxes = document.querySelectorAll('.box');
    var sortedBoxes = Array.from(boxes).sort(function(a, b) {
      var attr1A = parseInt(a.getAttribute('data-attr1'));
      var attr1B = parseInt(b.getAttribute('data-attr1'));
      var attr2A = parseInt(a.getAttribute('data-attr2'));
      var attr2B = parseInt(b.getAttribute('data-attr2'));

      if (attr1A === attr1B) {
        return attr2A - attr2B;
      } else {
        return attr1A - attr1B;
      }
    });

    var container = document.body;
    sortedBoxes.forEach(function(box) {
      container.appendChild(box);
    });
  </script>
</body>
</html>

这段代码首先定义了一些带有data-attr1和data-attr2属性的div元素，每个属性都代表一个数据属性。然后使用querySelectorAll方法选择所有的div元素，并将其转换为数组。接下来，使用sort方法对数组进行排序，排序函数首先比较data-attr1属性，如果相等则比较data-attr2属性。最后，使用forEach方法将排序后的div元素依次添加到页面中。

这种方法可以根据两个数据属性对div进行排序，可以根据实际需求进行修改。