萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現標簽上移、下移、置頂

jquery實現標簽上移、下移、置頂

   jquery實現標簽上移、下移、置頂

        這篇文章主要介紹了jquery實現標簽上移、下移、置頂的相關資料,並附上示例,非常實用,需要的朋友可以參考下

  eg:如在後台的標簽列表中,實現上移、下移、置頂功能

  主要實現思路是節點操作,比如說:上移,直接把點擊項移動到前一個節點,以此類推,當然實際代碼實現還要加些判斷,如當前點擊操作項是否已經是置底或置底了,如果是則給點相應提示,好讓操作者知道發生了什麼事情。

  思路:

  1、先用到的克隆方法.clone(true):

  即把當前要移動的項先保存好,備於後用。

  2、找到當前標簽所對應的相關元素及其相關方法:

  如:.prev()當前元素上面的標簽

  .next()當前元素下面的標簽

  .after()xxx之後添加方法

  .before()xxx之前添加方法

  .prepend添加方法

  3、實現

  具體代碼如:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 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('親,現在已是最下的哦,不能再下移了...'); } } }

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

copyright © 萬盛學電腦網 all rights reserved