星空网 > 软件开发 > Java

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

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('亲,现在已是最下的哦,不能再下移了...');
        }
    }
}

源码下载:点击下载




原标题:jquery实现标签上移、下移、置顶

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

紧急收藏!各个国家最新清关要求汇总!:https://www.ikjzd.com/articles/90783
警惕!2019出货风险地图,这些国家进入高危名单!:https://www.ikjzd.com/articles/90784
又见拿来主义,亚马逊无货源店群模式能走多远?:https://www.ikjzd.com/articles/90785
侵权后果严重!这些防止侵权方法及相关查询工具一定要知道:https://www.ikjzd.com/articles/90786
FBA出现不可售产品怎么办?:https://www.ikjzd.com/articles/90788
Lazada适合中国卖家入驻吗?:https://www.ikjzd.com/articles/90790
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
零售晚报:丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836649.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流