jquery实现标签上移、下移、置顶


Posted in Javascript onApril 26, 2015

eg:如在后台的标签列表中,实现上移、下移、置顶功能

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

思路:

1、先用到的克隆方法.clone(true):

     即把当前要移动的项先保存好,备于后用。

2、找到当前标签所对应的相关元素及其相关方法:

    如:.prev()当前元素上面的标签

         .next()当前元素下面的标签

         .after()xxx之后添加方法

         .before()xxx之前添加方法

         .prepend添加方法

3、实现

具体代码如:

var productsLabel = { 
  //设置置顶 
  setHot: function(t){ 
    var bar = 'showAndHide_box'; 
    var obj = $(t).parents('.'+bar).clone(true); 
    $(t).parents('.'+bar).remove(); 
    $(".showAndHide_list_box").prepend(obj); 
  },

  //设置上移 
  setUp: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).prev().before(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最上的哦,不能再上移了...'); 
    } 
  },

  //设置下移 
  setDown: function(t){ 
    var bar = 'showAndHide_box'; 
    if($(t).parents('.'+bar).next('.'+bar).html() != undefined){ 
      var obj = $(t).parents('.'+bar).clone(true); 
      $(t).parents('.'+bar).next().after(obj); 
      $(t).parents('.'+bar).remove(); 
    }else{ 
      alert('亲,现在已是最下的哦,不能再下移了...'); 
    } 
  } 
}

以上就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
Javascript玩转继承(二)
May 08 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
小程序实现上下切换位置
Nov 16 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
jquery获取节点名称
Apr 26 #Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 #Javascript
jquery插件qrcode在线生成二维码
Apr 26 #Javascript
javascript函数式编程实例分析
Apr 25 #Javascript
javascript中eval函数用法分析
Apr 25 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
php+js实现倒计时功能
2014/06/02 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Three.js学习之网格
2016/08/10 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解vue组件基础
2018/05/04 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
中秋节礼品促销方案
2014/02/02 职场文书
给孩子的新年寄语
2014/04/08 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
谢师宴家长致辞
2015/07/27 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Python学习之时间包使用教程详解
2022/03/21 Python