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(‘亲,现在已是最下的哦,不能再下移了...‘);
}
}
}
源码下载:点击下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。