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

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

<!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. 开源app之MyHearts

    前言 这个月,说实话,有忙有闲,经历了一次病痛的洗礼,才认识到了只有好好的生活,认真的对待自己的身体,才能更好的去工作,没有了身体的支撑,什么工作都只能是纸老虎,不攻自破.在这里也祝愿大家,在生活中好 ...

  2. shell之脚本练习

    脚本需求集合贴-自主开发的 对频繁执行的任务有编写脚本的价值 对单次执行的任务就用笨的,简单的办法 1.对asterisk写一个脚本 查日志 输入日期--能够输出对应日期的日志 输入多个条件--能够输 ...

  3. unity, Graphics.Blit (null, null, mat,0);

    我使用 Graphics.Blit (null, finalRT, mat); 合成出一张finalRT,然后将finalRT用在editor脚本的OnInspector中使用 Graphics.Dr ...

  4. Android之Handler用法总结

    方法一:(java习惯,在android平台开发时这样是不行的,因为它违背了单线程模型) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread ...

  5. C#.NET vs2010中使用IrisSkin4.dll轻松实现WinForm窗体换肤功能

    IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现WinForm窗体换肤 然而IrisSkin2.dll只能在.NET Faremwork 4.0以及之前的版本使用,所以要在V ...

  6. MySQL 体系结构以及各种文件类型学习汇总 (转)

    1,mysql体系结构 由数据库和数据库实例组成,是单进场多线程架构. 数据库:物理操作系统文件或者其它文件的集合,在mysql中,数据库文件可以是frm.myd.myi.ibd等结尾的文件,当使用n ...

  7. 日常维护管理-DBA运维交接清单

    序号 交接内容 交接目标与要点 交接物 交接状态 交接开始时间 交接结束时间 负责人 备注 1 人事关系 与开发项目组成员互识,并了解其职责 开发项目组成员清单 2016/2/29 2016/2/29 ...

  8. 【java】serialVersionUID作用

    serialVersionUID适用于Java的序列化机制.简单来说,Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的 ...

  9. line-height让文本在块级元素中居中显示总结

    一.总结: line-height不仅可以用在段落文本中控制行与行之间的间距,还可以用来控制文本在li这种块级元素中的位置. 文本行间距的大小由字体的大小决定,行间距的大小的设置方法有5种方式:

  10. 读书笔记：应用随机过程：概率模型导论：Aloha协议问题

    例4.16,Aloha协议:就本书例题所涉及的部分来说,几乎等同于CSMA.这个例题重写如下: 考察一个包含多个设备的通信系统,其中在每个时间段发送信息的设备个数是独立同分布的.......每个设备将 ...