首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

代码语言:txt
复制
<!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-attr1data-attr2属性的div元素,每个属性都代表一个数据属性。然后使用querySelectorAll方法选择所有的div元素,并将其转换为数组。接下来,使用sort方法对数组进行排序,排序函数首先比较data-attr1属性,如果相等则比较data-attr2属性。最后,使用forEach方法将排序后的div元素依次添加到页面中。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 Python 行和矩阵进行排序

在本文中,我们将学习一个 python 程序来行和矩阵进行排序。 假设我们采用了一个输入的 MxM 矩阵。我们现在将使用嵌套的 for 循环给定的输入矩阵进行逐行和排序。...− 创建一个函数sortingMatrixByRow()来矩阵的每一行进行排序,即通过接受输入矩阵m(行数)作为参数来逐行排序。 在函数内部,使用 for 循环遍历矩阵的行。...创建一个函数 sortMatrixRowandColumn() 通过接受输入矩阵 m(行数)作为参数来矩阵行和列进行排序。...Python 给定的矩阵进行行和列排序。...此外,我们还学习了如何转置给定的矩阵,以及如何使用嵌套的 for 循环(而不是使用内置的 sort() 方法)矩阵进行排序

6.1K50
  • JavaScript 如何 JSON 数据进行冒泡排序

    在本文中,我们将探讨如何使用 JavaScript JSON 数据进行冒泡排序,以实现按照指定字段排序的功能。 了解冒泡排序算法 冒泡排序是一种简单但效率较低的排序算法。...解析 JSON 数据 首先,我们需要解析 JSON 数据并将其转换为 JavaScript 对象或数组,以便进行排序操作。...如果要按照 JSON 数据中的特定字段进行排序,我们可以修改冒泡排序函数来比较指定字段的值。...、解析 JSON 数据、实现冒泡排序函数以及根据指定字段进行排序,我们可以使用 JavaScript JSON 数据进行冒泡排序。...这使得我们能够按照指定的顺序对数据进行排序,并满足特定的需求。通过掌握这个技巧,我们能够更好地处理和操作 JSON 数据

    24010

    如何python的字典进行排序

    可是有时我们需要对dictionary中 的item进行排序输出,可能根据key,也可能根据value来排。到底有多少种方法可以实现dictionary的内容进行排序输出呢?...python容器内数据排序有两种,一种是容器自己的sort函数,一种是内建的sorted函数。...= adict.keys() keys.sort() return [dict[key] for key in keys] #还是key值排序,据说更快。。。...: # 按照value进行排序 print sorted(dict1.items(), key=lambda d: d[1]) 知识点扩展: 准备知识: 在python里,字典dictionary是内置的数据类型...到此这篇关于如何python的字典进行排序的文章就介绍到这了,更多相关python的字典进行排序方法内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

    5.6K10

    MySQL | 如何查询结果集进行排序

    数据操作语言:结果集排序 如果没有设置,查询语句不会对结果集进行排序。也就是说,如果想让结果集按照某种顺序排列,就必须使用 ORDER BY 子句。 SELECT .........ASC 代表升序(默认),DESC 代表降序 如果排序列是数字类型,数据库就按照数字大小排序,如果是日期类型就按日期大小排序,如果是字符串就按照字符集序号排序。...默认情况下,如果两条数据排序字段内容相同,那么排序会是什么样子?...type);SHOW INDEX FROM t_message;ALTER TABLE t_message ADD INDEX idx_type(type);SQL 我们可以使用 ORDER BY 规定首要排序条件和次要排序条件...数据库会先按照首要排序条件排序,如果遇到首要排序内容相同的记录,那么就会启用次要排序条件接着排序

    6.2K10

    如何Scala中集合(Collections)进行排序

    文章标题: 《如何Scala中集合(Collections)进行排序》 本文链接: http://www.iteblog.com/archives/1171 下面是一系列 Scala 中的Lists...、Array进行排序的例子,数据结构的定义如下: // data structures working with val s = List( "a", "d", "F", "B", "e") val n...function (Thanks Rahul) */ s.sortWith(_.toLowerCase < _.toLowerCase) res4: List = List(a, B, d, e, F) 如何...case (key, value) => println(key + " = " + value) } 0 = -16 -1 = -4 1 = 2 -2 = 5 2 = 6 5 = 9 数据排序...上面的排序并不对原始的数据产生影响,排序的结果被存储到别的变量中,如果你的元素类型是数组,那么你还可以对数组本身进行排序,如下: scala> val a = Array(2,6,1,9,3,2,1,

    1.8K50

    如何 1 千万个整数进行快速排序

    没有其他数据与该正数相关联。 输出:升序排列的输入整数的列表。 约束:最多有(大约)1MB的内存空间可用,有充足的磁盘存储空间可用。运行时间最多几分钟,运行时间为10秒就不需要进一步优化。...一种思路是,既然总的内存不够,我们可以读取40次,例如,第一次读取0至249 999之间的数,并进行排序输出,第二次读取250 000 至499 999之间的数,并排序输出。...以次类推,在进行了多次排序之后就完成了所有数据排序,并输出到文件中。 另外一种思路是,既然有充足的磁盘存储空间可用,那么我们可以借助中间文件。...如何将第n个比特位置1?先将1左移n位(n小于8),得到一个值,再将这个值与该字节进行相或即可。...这一切都基于输入数据都是正确的,但这丝毫不影响我们该算法思想的理解。 总结 位图法适用于大规模数据,但数据状态又不是很多的情况。对于上面的程序,几乎是做完读取操作之后,排序就完成了,效率惊人。

    2K80

    如何1千万个整数进行快速排序

    没有其他数据与该正数相关联。 输出:升序排列的输入整数的列表。 约束:最多有(大约)1MB的内存空间可用,有充足的磁盘存储空间可用。运行时间最多几分钟,运行时间为10秒就不需要进一步优化。...一种思路是,既然总的内存不够,我们可以读取40次,例如,第一次读取0至249 999之间的数,并进行排序输出,第二次读取250 000 至499 999之间的数,并排序输出。...以次类推,在进行了多次排序之后就完成了所有数据排序,并输出到文件中。 另外一种思路是,既然有充足的磁盘存储空间可用,那么我们可以借助中间文件。...如何将第n个比特位置1?先将1左移n位(n小于8),得到一个值,再将这个值与该字节进行相或即可。...这一切都基于输入数据都是正确的,但这丝毫不影响我们该算法思想的理解。 总结 位图法适用于大规模数据,但数据状态又不是很多的情况。对于上面的程序,几乎是做完读取操作之后,排序就完成了,效率惊人。

    2.3K20

    使用PythonExcel数据进行排序,更高效!

    标签:Python与Excel,pandas 表排序是Excel中的一项常见任务。我们对表格进行排序,以帮助更容易地查看或使用数据。...然而,当你的数据很大或包含大量计算时,Excel中的排序可能会非常慢。因此,这里将向你展示如何使用PythonExcel数据进行排序,并保证速度和效率!...但是,注意,由于默认情况下inplace=False,此结果数据框架不会替换原始df。 图2 索引对表排序 我们还可以升序或降序对表进行排序。...图3 指定列排序 我们已经看到了如何索引排序,现在让我们看看如何单个列排序。让我们购买日期对表格进行排序。默认情况下,使用升序,因此我们将看到较早的日期排在第一位。...图4 多列排序 我们还可以多列排序。在下面的示例中,首先顾客的姓名进行排序,然后在每名顾客中再次“购买物品”进行排序

    4.8K20

    多个字段中如何其中两个进行排序(二次排序

    多个字段中如何其中两个进行排序(二次排序) 1 原理     二次排序就是首先按照第一字段排序,然后再第一字段相同的行按照第二字段排序,注意不能破坏第一次排序的结果。     ...这里主要讲如何使用一个Mapreduce就可以实现二次排序。Hadoop有自带的SecondarySort程序,但这个程序只能对整数进行排序,所以我们需要对其进行改进,使其可以对任意字符串进行排序。...在reduce阶 段,reducer接收到所有映射到这个reducer的map输出后,也是会调用job.setSortComparatorClass设置的key比 较函数类所有数据排序。...,同时完成两列数据的相关操作,这里是二者进行比较      *       */     public static class IntPair implements WritableComparable...super(IntPair.class, true);         }         // Compare two WritableComparables.         // 重载 compare:组合键第一个自然键排序分组

    4.8K80

    如何增广试验数据进行分析

    之前发了增广数据或者间比法的分析方法,R语言还是有点门槛,有朋友问能不能用Excel或者SPSS操作?我试了一下,Excel肯定是不可以的,SPSS我没有找到Mixed Model的界面。...矫正值 校正值即是原来的观测值去掉区组效应后的值,这个值更接近于品种的真实值,可以根据它来进行排序进行品种筛选。 ?...更好的解决方法:GenStat 我们可以看出,我们最关心的其实是矫正产量,以及LSD,上面的算法非常繁琐,下面我来演示如果这个数据用Genstat进行分析: 导入数据 ? 选择模型:混合线性模型 ?...LSD 因为采用的是混合线性模型,它假定数据两两之间都有一个LSD,因此都输出来了,我们可以对结果进行简化。...结论 文中给出的是如何手动计算的方法,我们给出了可以替代的方法,用GenStat软件,能给出准确的、更多的结果,如果数据量大,有缺失值,用GenStat软件无疑是一个很好的选择。

    1.6K30

    无限级分类数据进行重新排序(非树形结构)

    本文记录的方式是先将所有数据查出来,再使用递归对数据进行排序,并附加层级字段(level)。此方式仅仅对无限级的数据进行排序,并没有将子级内容放入父级。 1. 先看效果图 ---- 2....在 TP6.0 中使用的 无限级分类进行排序,并附加层级字段 ---- <?...CategoryModel::field('id,pid,name') ->order('sort desc') ->select(); $data = $this->_sort($data);//无限级分类重新排序...dump($data); } /** * 无限级分类递归排序 */ private function _sort($data, $pid = 0, $level = 0) { static $arr...其他写法 ---- /** * 无限级分类排序 */ private function getTree($array, $pid = 0, $level = 0) { // 声明静态数组,避免递归调用时

    1.5K40

    抖音二面,内存只有 2G,如何 100 亿数据进行排序

    之前我其实不是很能理解这座墙的意义,见证了俄乌战争、美利坚发动的铺天盖地的舆论攻势之后,我大概能够明白,这座墙,抵御的到底是谁了 大数据小内存排序问题,很经典,很常见,类似的还有比如 “如何对上百万考试的成绩进行排序...” 等等 大概有这么三种方法: 数据排序(对数据库设备要求较高) 分治法(常见思路) 位图法(Bitmap) 1....数据排序 将存储着 100 亿数据的文本文件一条一条导入到数据库中,然后根据某个字段建立索引,数据进行索引排序操作后我们就可以依次提取出数据追加到结果集中。...,可以用快速排序,归并排序,堆排序等等 3)1000 个小文件内部排好序之后,就要把这些内部有序的小文件,合并成一个大的文件,可以用堆排序来做 1000 路合并的操作(假设是从小到大排序,用小顶堆):...要想定义存储空间大小就需要实现知道存储的元素到底有多少 对于有符号类型的数据,需要用 2 位来表示,比如 第 0 位和第 1 位表示 0 这个数据,第 2 位和第 3 位表示 1 这个数据......

    4K10

    如何iOS 16系统进行性能数据采集

    所以基于业务需求,需要找到一款免费、数据置信、使用简单的性能采集工具,本文就介绍下如何iOS16性能数据采集。...Android Studio工具: Xcode工具: 优点: 1、数据采集准确: 可以兼容不同系统型号的设备进行数据采集,采集CPU、内存、FPS等指标都非常精准。...缺点: 1、需要源码编译才能性能采集数据: 需要有Android或者iOS项目的源代码进行编写后才能进行性能采集数据。...缺点: 1、需要在代码中额外配置,有侵入性: 需要研发配合在代码工程中配置第三方库项目代码有侵入性,还有就是需要在正式包不集成这种性能采集工具,都需要额外的功能开发。...优点: 1、代码无侵入 2、实时展示数据 缺点: 1、需要有一定的学习成本和配置成本 工具使用 这里主要解决iOS16的性能测试问题,主要思路还是使用外置脚本来采集并且能实时展示数据

    1.9K41
    领券