<!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. [Codechef TASTR] Level of Difference - 后缀数组,容斥原理

    [Codechef TASTR] Level of Difference Description 给定两个字符串,求恰好在一个字符串中出现过的本质不同的子串数量. Solution 设 \(U(S)\ ...

  2. WPF学习笔记五之MVVM

    1.概念 MVVM是Model-View-ViewModel的缩写形式,它通常被用于WPF或Silverlight开发.这三者之间的关系如下图所示 模型(Model) Model——可以理解为带有字段 ...

  3. codeforces 1282 E. The Cake Is a Lie （dfs+构造）

    链接:https://codeforces.com/contest/1282/problem/E 题意:给的是一张平面图,是一个n边形,每次可以切一刀,切出一个三角形,最终切成n-2个三角形.题目给出 ...

  4. Python_初识函数

    为什么要用函数 现在python届发生了一个大事件,len方法突然不能直接用了... 然后现在有一个需求,让你计算'hello world'的长度,你怎么计算? 这个需求对于现在的你其实不难,我们一起 ...

  5. word文档巧替换（空行替换、空格替换、软回车替换成硬回车）

    一.空行替换 在日常工作中,我们经常从网上下载一些文字材料,往往因空行多使得页数居高不下.一般方法是:在“编辑”菜单中打开“查找和替换”对话框(或按ctrl+H),在“查找内容”中输入“^p^p”“替 ...

  6. 【算法学习记录-排序题】【PAT A1016】Phone Bills

    A long-distance telephone company charges its customers by the following rules: Making a long-distan ...

  7. OpenCV函数 重映射

    重映射是什么意思? 把一个图像中一个位置的像素放置到另一个图片指定位置的过程. 为了完成映射过程, 有必要获得一些插值为非整数像素坐标,因为源图像与目标图像的像素坐标不是一一对应的. 我们通过重映射来 ...

  8. MySQL数据库 | 数据表的增删改查

    MySQL数据的增删改查(crud) 本文结构 一.增加 create 二.修改 update 三.查询 retrieve(简单查询,下篇详细展开) 四.删除 delete 首先,创建简单的class ...

  9. Hadoop TextInputFormat

    1. TextInputFortmat TextInputFormat是默认的InputFormat.每条记录是一行输入.Key是LongWritable类型,存储该行在整个文件中的字节偏移量(不是行 ...

  10. MFC单文档视图中嵌入GLFW窗口

    开始学习OpenGL由于有一段时间,但是glfw只有窗口区,虽然通过某种手段(移步这里)可以加入工具栏,但仍然无法作为一个标准的GUI,而直接在MFC或Qt里面使用OpenGL API感觉有诸多制肘, ...