按照两个数据属性对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进行排序,可以根据实际需求进行修改。
领取专属 10元无门槛券
手把手带您无忧上云