快捷導航

jquery實現(xiàn)標簽上移、下移、置頂

更新時間：2015年04月26日 12:51:18 投稿：hebedich

這篇文章主要介紹了jquery實現(xiàn)標簽上移、下移、置頂?shù)南嚓P(guān)資料,并附上示例，非常實用，需要的朋友可以參考下

eg:如在后臺的標簽列表中，實現(xiàn)上移、下移、置頂功能

主要實現(xiàn)思路是節(jié)點操作，比如說：上移，直接把點擊項移動到前一個節(jié)點，以此類推，當然實際代碼實現(xiàn)還要加些判斷，如當前點擊操作項是否已經(jīng)是置底或置底了，如果是則給點相應提示，好讓操作者知道發(fā)生了什么事情。

思路：

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

即把當前要移動的項先保存好，備于后用。

2、找到當前標簽所對應的相關(guān)元素及其相關(guān)方法：

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

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

.after()xxx之后添加方法

.before()xxx之前添加方法

.prepend添加方法

3、實現(xiàn)

具體代碼如：

var productsLabel = { 
  //設(shè)置置頂 
  setHot: function(t){ 
    var bar = 'showAndHide_box'; 
    var obj = $(t).parents('.'+bar).clone(true); 
    $(t).parents('.'+bar).remove(); 
    $(".showAndHide_list_box").prepend(obj); 
  },

  //設(shè)置上移 
  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('親，現(xiàn)在已是最上的哦，不能再上移了...'); 
    } 
  },

  //設(shè)置下移 
  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('親，現(xiàn)在已是最下的哦，不能再下移了...'); 
    } 
  } 
}

以上就是本文給大家分享的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式
這篇文章主要介紹了jQuery使用CSS()方法給指定元素同時設(shè)置多個樣式的方法,實例分析了jQuery中css方法的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
JQuery如何按name屬性選擇元素
這篇文章主要介紹了JQuery如何按name屬性選擇元素問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
分享一款基于jQuery的視頻播放插件
最近在做一個項目，需要一個在線視頻播放的功能，在度娘上找了許多都不是太理想，就動手寫了一個，分享給大家
2014-10-10
jQuery 表格插件整理
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計者更好地駕御 HTML 表格，你可以對表格進行橫向和豎向排序，設(shè)置固定表頭，對表格進行搜索，對大表格進行分頁，對表格進行滾動，拖放操作等等。這些插件很多都包含詳細的教程。
2010-04-04
深入理解jquery中的事件與動畫
下面小編就為大家?guī)硪黄钊肜斫鈐query中的事件與動畫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery自定義組件(導入組件)
這篇文章主要介紹了jQuery自定義導入組件的相關(guān)資料,包括組件js，組件css及組件引用的內(nèi)容，非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
jQuery實現(xiàn)div隨意拖動的實例代碼(通用代碼)
這篇文章主要介紹了jQuery實現(xiàn)div隨意拖動的實例代碼，涉及到j(luò)query div隨意拖動相關(guān)知識，感興趣的朋友一起學習吧
2016-01-01
基于zTree樹形菜單的使用實例
下面小編就為大家分享一篇zTree樹形菜單的使用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
詳解jquery選擇器的原理
這篇文章主要介紹了詳解jquery選擇器的原理的相關(guān)資料,就是jquery原型里面有一個init初始化的方法，將傳入的值進行解析，比如傳入的id還是class還是標簽名，需要的朋友可以參考下
2017-08-08
jquery中獲取元素里某一特定子元素的代碼
這篇文章主要介紹了jquery中獲取元素里某一特定子元素的代碼,需要的朋友可以參考下
2014-12-12