<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡-vue</title>

   <link rel="stylesheet" type="text/css" href="public.css">

</head>

<body>

<div id='app'>

    <ul >

        <li data-i='0'>0</li>

        <li data-i='1'>1</li>

        <li data-i='3'>3</li>

        <li data-i='5'>5</li>

    </ul>

</div>

<script type="text/javascript" src="vue2.js"></script>

<script type="text/javascript">

var lis = document.querySelectorAll('ul li');

var lis = Array.prototype.slice.call(lis);

lis.sort(function(a,b){

     //return a.getAttribute("data-i")-b.getAttribute("data-i");

    // 根据data-i进行降序排序

      return b.dataset.i-a.dataset.i;

})

var ul =  document.querySelector('ul');

ul.innerHTML='';

for(var i=0;i<lis.length;i++){

    ul.appendChild(lis[i]);

}

</script>

</body>

</html>

js 根据data-i 降序排列的更多相关文章

  1. js学习篇--数组按升序降序排列

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 转<<C#集合Dictionary中按值的降序排列

    转载地址:http://blog.sina.com.cn/s/blog_5c5bc9070100pped.html C#集合Dictionary中按值的降序排列 static void Main(st ...

  3. MSSQL 随机查询且降序排列

    --随机查询且降序排列 * FROM dbo.COMPANY_USER_INFO ORDER BY NEWID()) AS T ORDER BY T.cu_id DESC

  4. Shell练习 统计单词个数，降序排列

    原文:https://leetcode.com/problems/word-frequency/ Write a bash script to calculate the frequency of e ...

  5. Linux显示按文件大小降序排列

    Linux显示按文件大小降序排列 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -ls 总用量 56 12 -rw-r--r-- 1 youhaidon ...

  6. python小练习： 给定一个数组 按重复次数 降序排列输出 数组非空且为正整数

    假设有个列表  a=[1,1,1,2,2,4,5,5,5,5] (非空且为正整数) 那么根据要求 最终输出的形式为  5,1,2,4  (按重复次数 降序排列输出) 代码实现及解释: a=[1,1,1 ...

  7. 给定一个只包含正整数的非空数组,返回该数组中重复次数最多的前N个数字 ,返回的结果按重复次数从多到少降序排列(N不存在取值非法的情况)

    """ #给定一个只包含正整数的非空数组,返回该数组中重复次数最多的前N个数字 #返回的结果按重复次数从多到少降序排列(N不存在取值非法的情况) 解题思路: 1.设定一个 ...

  8. ANY 和 IN 查询价格大于或等于"超级本"价格的商品，并且按价格降序排列

    -- 查询价格大于或等于"超级本"价格的商品,并且按价格降序排列 //ANY用法 //与比较操作符联合使用,表示与子查询返回的任何值比较为 TRUE ,则返回 TRUE //简单案 ...

  9. 笔记:mysql升序排列asc，降序排列desc

    经常会忘记mysql中升序和降序用什么字符来表示,现在就做个笔记:升序排列asc,降序排列desc,举个例子,下面是按时间降序调用栏目的文章,也即是栏目最新文章 [e:loop={"sele ...

  10. mapreduce程序的按照key值从大到小降序排列

    在近期的Hadoop的学习中,在学习mapreduce时遇到问题:让求所给数据的top10,们我们指导mapreduce中是有默认的排列机制的,是按照key的升序从大到小排列的 然而top10问题的求 ...

随机推荐

  1. pytorch之max()函数

    pytorch之max()函数 待办 返回对应给定中最大值的索引,方便进行和target结果的索引进行比较 索引方式见下 https://blog.csdn.net/liuweiyuxiang/art ...

  2. ReLU(inplace=True),这里的inplace=true的意思

    ReLU(inplace=True),这里的inplace=true的意思 待办 inplace=True means that it will modify the input directly, ...

  3. php设计模式之装饰模式实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 文章编辑类 */ class Article { pr ...

  4. ubuntu 安装谷歌

    下载ubuntugoogle官网:http://www.ubuntuchrome.com/ 我的是ubuntuLTS稳定版: 上传Ubuntu: 执行解压操作: sudo   dpkg -i  goo ...

  5. CentOS7识别不到win10启动项的解决方法

    Windows的文件系统是NTFS格式的,而CentOS是不支持NTFS格式的.因此,我们要安装另外的工具使CentOS能识别NTFS格式的文件系统. 这里我们选择ntfs-3g这个工具,安装过程如下 ...

  6. java基础之 数据类型

    数据类型表示要存储在变量中的不同类型的值. 一.Java语言提供了八种基本数据类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. 1. byte byte 数据类型是8位.有 ...

  7. DVWA的安装及报错解决

    PS:我是在wamp5集成环境中搭建的 1.解压下载好的DVWA安装包到www目录下 DVWA安装包: https://pan.baidu.com/s/1ivnwiH53gIV5jWU5IyeD0Q ...

  8. 工具使用：xmind

    概念 心智图,又称脑图.思维导图.灵感触发图.概念地图或思维地图,是一种图像式思维的工具与及一种利用图像式思考辅助工具来表达思维的工具. 详细的可以查看这里(维基百科)还有这里(百度百科) 用了思维导 ...

  9. HBase 中 Memstore-Local Allocation Buffer

    在0.90 版本后的 HBase,引入了一个高级机制用于缓解堆内存碎片的问题.此内存碎片问题的产生的主要原因是由于 memstore 上的扰动(频繁的分配与释放内存空间)导致.对应解决此问题的机制为M ...

  10. 8.1.1 IO

    IO对象无拷贝或赋值.进行IO操作的函数通常以引用的方式传递和返回流,且该引用不能是const的 确定一个流对象是否处于良好状态的最简单的方法是将它作为一个条件来使用 while (cin >& ...