首頁  >  文章  >  web前端  >  jquery實作標籤上移、下移、置頂_jquery

jquery實作標籤上移、下移、置頂_jquery

WBOY
WBOY原創
2016-05-16 16:02:081454瀏覽

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

以上就是本文給大家分享的全部內容了,希望大家能夠喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn