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

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

<!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. sql commands

    1,DBCC SQLPERF(logspace) https://msdn.microsoft.com/en-us/library/ms189768.aspx 2, 1, LOGINFO(''HAHA ...

  2. 尾数为0零BigDecimal不能装成正常数

    BigDecimal b1 = rs.getBigDecimal("binary_double_column"); System.out.println( "ceshi: ...

  3. Unity3d 适配机型

    1,为了是更多机型能够安装你的游戏,Unity3d Device Filter设置:ARMv6 with VFP: 2,华为C8600,一运行强制停止: 参考网址:http://forum.unity ...

  4. unity3d用鼠标拖动物体的一段代码

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 这是一段拖动物体的代码,比较简洁明了,对了解uni ...

  5. Java C# 加密解密类库

    Bouncy Castle 是一种用于 Java 平台的开放源码的轻量级密码术包.它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.因为 Bouncy Castle 被设计成轻量级的,所以从 ...

  6. net上传图片重命名

    string FileName = File.FileName;//获取上传文件的名称 string Str = FileName.Split('.')[1];//获取上传文件的后缀 string N ...

  7. 并行计算之Memory barrier（内存

    本文转载自:http://name5566.com/4535.html 参考文献列表:http://en.wikipedia.org/wiki/Memory_barrierhttp://en.wiki ...

  8. IOS-归档的使用

    归档又叫序列化(coding) //   归档NSKeyedArchiver //   解归档NSKeyedUnarchiver // 归档之后的文件 会被加密 //  可以归档的文件.数据--> ...

  9. Hadoop：使用原生python编写MapReduce

    功能实现 功能:统计文本文件中所有单词出现的频率功能. 下面是要统计的文本文件 [/root/hadooptest/input.txt] foo foo quux labs foo bar quux ...

  10. Saltstack系列1：安装配置

    安装 安装EPEL作为安装Ansible的yum源(CentOS6.4) rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/6/i386/epel-release ...