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

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

<!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. java 四种内部类和内部接口

    /** * 常规内部类:常规内部类没有用static修饰且定义在在外部类类体中. * 1.常规内部类中的方法可以直接使用外部类的实例变量和实例方法. * 2.在常规内部类中可以直接用内部类创建对象 * ...

  2. javascript输出图的简单路径

    <script> //图的构建 function vnode() { this.visited=0; this.vertex=0; this.arcs=new Array(); } fun ...

  3. PHP-线程一直不释放调试

    一.现象 1.查看进程是否存在 ps -ef | grep -v 'grep' |grep -E 'shell/cron/bonus/cash' www      2624    1  0 Oct24 ...

  4. 套接字I/O模型-WSAEventSelect（转载）

    和WSAAsyncSelect类似,它也允许应用程序在一个或多个套接字上,接收以事件为基础的网络事件通知. 该模型最主要的区别是在于网络事件是由对象句柄完成的,而不是通过窗口例程完成. 事件通知 事件 ...

  5. 用js实现导航菜单点击切换选中时高亮状态

    随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...

  6. CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

  7. Linux 下 apache 日志分析与状态查看[转]

    假设apache日志格式为: 118.78.199.98 – - [09/Jan/2010:00:59:59 +0800] “GET /Public/Css/index.css HTTP/1.1″ 3 ...

  8. 解决Android AVD的方向键DPAD不能用的问题

    Android AVD在生成出来一个新的模拟器之后默认都是不能够使用DPAD的.原因是它禁用了. 解决方式如下 : 找到C:\Documents and Settings\Administrator\ ...

  9. jQuery Mobile_公司简介

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. js 二维数组定义

    1.二维数组声明方式是下面这样的: var images=new Array(); //先声明一维 for(var i=0;i<10;i++){ //一维长度为10 images[i]=new ...