jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂
eg:如在后臺(tái)的標(biāo)簽列表中,實(shí)現(xiàn)上移、下移、置頂功能
主要實(shí)現(xiàn)思路是節(jié)點(diǎn)操作,比如說(shuō):上移,直接把點(diǎn)擊項(xiàng)移動(dòng)到前一個(gè)節(jié)點(diǎn),以此類推,當(dāng)然實(shí)際代碼實(shí)現(xiàn)還要加些判斷,如當(dāng)前點(diǎn)擊操作項(xiàng)是否已經(jīng)是置底或置底了,如果是則給點(diǎn)相應(yīng)提示,好讓操作者知道發(fā)生了什么事情。
思路:
1、先用到的克隆方法.clone(true):
即把當(dāng)前要移動(dòng)的項(xiàng)先保存好,備于后用。
2、找到當(dāng)前標(biāo)簽所對(duì)應(yīng)的相關(guān)元素及其相關(guān)方法:
如:.prev()當(dāng)前元素上面的標(biāo)簽
.next()當(dāng)前元素下面的標(biāo)簽
.after()xxx之后添加方法
.before()xxx之前添加方法
.prepend添加方法
3、實(shí)現(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)在已是最下的哦,不能再下移了...'); } } }
以上就是本文給大家分享的全部?jī)?nèi)容了,希望大家能夠喜歡。
- jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?/a>
- JQuery實(shí)現(xiàn)Table的tr上移下移功能
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡(jiǎn)單)
- jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】
- jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
- jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果
- JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移
相關(guān)文章
解決checkbox的attr(checked)一直為undefined問(wèn)題
需要做個(gè)一個(gè)全選的checkbox功能,遇到checkbox的attr("checked")一直為undefined,下面與大家分享下最終的解決方案2014-06-06jQuery插件jPaginate實(shí)現(xiàn)無(wú)刷新分頁(yè)
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問(wèn)題很難搞啊。關(guān)鍵是那個(gè)ie啊。2015-05-05jQuery實(shí)現(xiàn)偽分頁(yè)的方法分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)偽分頁(yè)的方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)偽分頁(yè)的具體步驟與相關(guān)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于利用JQuery模擬實(shí)現(xiàn)網(wǎng)頁(yè)中自定義鼠標(biāo)右鍵菜單功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案
在jQuery中,$是jQuery的別名,為了書寫方便,我們更習(xí)慣用$('#id')這一類的方式來(lái)書寫代碼。這篇文章給大家分享jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案,感興趣的朋友一起看看吧2016-11-11jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)發(fā)展歷程時(shí)間軸特效代碼,帶有左右箭頭,數(shù)字時(shí)間軸選項(xiàng)卡切換特效,有需要的小伙伴們可以來(lái)參考下2015-07-07