jquery realizes tag up down and top
- 2020-06-01 08:20:44
- OfStack
eg: such as in the background of the label list, to achieve the move up, move down, top function
The main implementation idea is the node operation, such as: move up, directly move the click item to the previous 1 node, and so on, of course, the actual code implementation but also add some judgment, such as the current click operation item is already set or set the bottom, if it is to give a corresponding hint, so that the operator know what happened.
Ideas:
1. The cloning method used first.
That is, the current item to be moved to save first, for later use.
2. Find the relevant elements corresponding to the current label and relevant methods:
For example:.prev () the tag above the current element
.next () tag below the current element
.after ()xxx add method after xxx
.before ()xxx before adding a method
.prepend add method
3, implementation,
The specific code is as follows:
var productsLabel = {
// Set the top
setHot: function(t){
var bar = 'showAndHide_box';
var obj = $(t).parents('.'+bar).clone(true);
$(t).parents('.'+bar).remove();
$(".showAndHide_list_box").prepend(obj);
},
// Set up
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(' Dear, now it is the top oh, can't move up any more ...');
}
},
// Set down
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(' Dear, now is the bottom of the oh, can not be moved down ...');
}
}
}
That's all I want to share with you. I hope you like it.