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 相关文章推荐
JS实现根据出生年月计算年龄
Jan 10 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
原生js实现弹出层效果
Jan 20 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JS实现吸顶特效
Jan 08 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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中用文本文件做数据库的实现方法
2008/03/27 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP文件与目录操作示例
2016/12/24 PHP
js正则表达式的使用详解
2013/07/09 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python函数和模块的使用总结
2019/05/20 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
html5实现滑块功能之type="range"属性
2020/02/18 HTML / CSS
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
教师党员个人整改措施
2014/10/27 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python