实现页面上列表内容上移、下移、置顶、置底 功能，主要实现思路是节点操作，比如说：上移，直接把点击项移动到前一个节点，以此类推，当然实际代码实现还要加些判断，如当前点击操作项是否已经是置底或置底了，如果是则给点相应提示，好让操作者知道发生了什么事情。

具体源码，大伙来感受下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<style>
.demo li{line-height: 30px;border-bottom: 1px solid #000;}
.demo li a{padding: 0 20px;}
</style>
</head>
<body>
<ul class="demo">
<li>001 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>002 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>003 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>004 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
</ul>
<script>
$(".demo").on('click', 'a', function(event) {
event.preventDefault;
var parent=$(this).parent();
var parents=$(this).parents(".demo");
var len=parents.children().length;
if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){
alert("已经置顶！");
return false;
}else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){
alert("已经置底！");
return false;
}
switch (true) {
case $(this).is(".up"):
var prev = parent.prev();
parent.insertBefore(prev);
break;
case $(this).is(".down"):
var next = parent.next();
parent.insertAfter(next);
break;
case $(this).is(".top"):
parents.prepend(parent);
break;
case $(this).is(".bottom"):
parents.append(parent);
break;
}
alert("操作完成！！");
});
</script>
</body>
</html>

js上移、下移、置顶、置底功能实现的更多相关文章

  1. iOS UILabel 文字 置顶/置底 实现

    iOS UILabel控件默认文字位置是居中的,如图所示: 但是我们经常碰到这样的需求,希望文字向上置顶,或者向下置底,但是很遗憾,iOS API中并没有提供相应的属性和方法,需要我们手动设置. 利用 ...

  2. [置顶]PADS PCB功能使用技巧系列之NO.002- 如何走差分线？

    差分信号在高速电路设计中应用越来越广泛,如USB.HDMI.PCI.DDR*等,承载差分信号的差分线主要优势有:抗干扰能力强,能有效抑制EMI.时序定位精确等,对于PCB工程师来说,最关注的是如何确保 ...

  3. [置顶]PADS PCB功能使用技巧系列之NO.001- 如何走蛇形线？

    蛇形线是布线过程中常用的一种走线方式,其主要目的是为了调节延时满足系统时序设计要求,但是设计者应该有这样的认识:蛇形线会破坏信号质量,改变传输延时,布线时要尽量避免使用,因此一块PCB上的蛇形线越多并 ...

  4. [置顶]PADS PCB功能使用技巧系列之NO.006- 如何实现OrCAD与PADS Layout同步？

    很多同仁都喜欢用OrCAD画原理图,而PCB Layout则用PADS/PowerPCB,这两者被有些人誉为“黄金组合”,但由于两者并非一套软件,因此如何实现同步亦是需要急待解决的问题... (未完待 ...

  5. [置顶]PADS PCB功能使用技巧系列之NO.005- 如何正确使用Verify Design？

    有没有遇到过进行Verify Design通过后,回来的样板仍然出现短路或其它莫名其妙的问题?此情此景,你是否一度对PADS失去的希望?但,工具是没有问题的,看看怎么样正确有效地使用它吧.主要需要注意 ...

  6. [置顶]PADS PCB功能使用技巧系列之NO.004- 如何做到20H规则？

    电源层与地层之间变化的电场在板边缘会向外辐射电磁干扰(EMI),称为边沿效应.20H规则可将70%的电场限制在接地层边沿内,100H可达到98%. (1)在Layout中,选择菜单栏Setup -&g ...

  7. [置顶]PADS PCB功能使用技巧系列之NO.003- 如何统一修改元件标号字体？

    LAYOUT完毕后进行元件标号字体调整时,你是否试图用Select Document+Select All来选定所有标号?可结果却并不令人满意. (1)在Layout中,选择菜单栏Edit -> ...

  8. 置顶菜单demo

    一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...

  9. WordPress 一键置顶文章（推荐用SM Sticky Clicky Star）

    在 WordPress入门 之 发布新文章和管理文章 中,倡萌已经简单提到可以在文章编辑界面或者快速编辑界面设置置顶文章,但是如果你想在后台文章列表中添加一键置顶文章的功能,不妨试试 Quick St ...

随机推荐

  1. KMP字符串模式匹配学习笔记

    KMP算法实验 1．编程计算模式串(子串)的next值.2．利用KMP算法在主串中找到模式串的位置. 参考代码:---------int getNexlVal( char * s,  int j)// ...

  2. MySQL执行计划显示与执行过程不符合一例

    一 建表和现象的过程如下 CREATE TABLE t1 (id1 INT, a1 INT, b1 INT, PRIMARY KEY(id1));CREATE TABLE t3 (id3 INT UN ...

  3. 本地vbs调试快速显示输出

    function setClipBoard(str) Set WshShell = CreateObject("WScript.Shell") Set oExec = WshShe ...

  4. linux概念之分区与文件系统

    分区类型 [root@-shiyan dev]# fdisk /dev/sda WARNING: DOS-compatible mode is deprecated. It's strongly re ...

  5. OpenJudge-计算点的距离并排序

    /*===================================== 距离排序 总时间限制: 1000ms 内存限制: 65536kB 描述 给出三维空间中的n个点(不超过10个),求出n个 ...

  6. Nginx实现静态资源的缓存

    1.1   需求 1.对静态文件进行缓存:html,js,css,png,gif,jpg,jpeg,bmp,swf. 2.对符合url规则的请求进行缓存. 3.针对某个url进行清除缓存. 1.1   ...

  7. shopex后台上传模板漏洞

    看到有人找这个拿SHELL的方法.就本地搭建试了下.很简单的. 首先是WIN下.需要WIN主机IIS解析漏洞. 进入后台.点页面管理.点模板列表.默认模板是紫气东来(ShopEx4.8).点编辑模板. ...

  8. UI设计的重要性--避免二义性的输入提示

    昨天晚上发现了西安公路客运网上售票系统网站的密码找回系统存在安全漏洞,得出的结论是:密码找回页的漏洞:   1.用户名栏支持用户名.身份证.电话三种任意一种匹配.2.这一步是关键,密码找回问题提示栏居 ...

  9. 剑指offer系列23---字符串排列（不是很理解）

    [题目]输入一个字符串,按字典序打印出该字符串中字符的所有排列. 例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 结果请按字母顺 ...

  10. css 默认

    先写全局的样式 body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dd,h1,h2, ...