jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼
更新時間：2012年07月07日 01:51:30 作者：
jquery(javascript)自動序列編號和屬性編號實現(xiàn)代碼，需要的朋友可以參考下
自動序列編號和自動屬性編號，效果圖如下：
實現(xiàn)原理：
添加和刪除是逆向過程，實現(xiàn)是一致的。
增加時，向父容器中增加元素append方法，并將所有的自定義屬性編號和序列編號設(shè)置為空，然后通過$.each方法，重新為自定義屬性編號和序列編號賦值。
復(fù)制代碼 代碼如下:
$.each(items, function (k, v) {
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
刪除時，為所有刪除按鈕綁定事件live方法，將元素從父容器中刪除detach方法，并將所有的自定義屬性編號和序列編號設(shè)置為空，然后通過$.each方法，重新為自定義屬性編號和序列編號賦值。
復(fù)制代碼 代碼如下:
$("#test .del").live("click", function () { //為刪除按鈕綁定點擊事件
var dels = test.find(".del"); //所有所刪除按鈕
var delnum = dels.index($(this)); //當(dāng)前刪除按鈕的索引值
var items = test.find(".item");
items.eq(delnum).detach(); //從父容器中將此節(jié)點刪除
items.attr("opt", "");
var serials = test.find(".serial");
serials.html("");
$.each(items, function (k, v) { //自定義屬性重新和編號賦值
$(this).attr("opt", "mopt" + k);
serials.eq(k).html(k);
});
});
示例如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
juqery 學(xué)習(xí)之五 文檔處理 包裹、替換、刪除、復(fù)制
這個函數(shù)的原理是檢查提供的第一個元素（它是由所提供的HTML標(biāo)記代碼動態(tài)生成的），并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素－－這個祖先元素就是包裹元素。2011-02-02
jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字
這篇文章主要介紹了jQuery過濾特殊字符及JS字符串轉(zhuǎn)為數(shù)字 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼
本文通過實例代碼給大家介紹了jQuery 實現(xiàn)鼠標(biāo)畫框并對框內(nèi)數(shù)據(jù)選中的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
下面小編就為大家?guī)硪黄猨query實時獲取時間的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
當(dāng)點擊添加時自動彈出窗口，填寫完畢按確定自動添加到table表格中，有需要的朋友可以參考一下2013-11-11
jquery自動補(bǔ)齊功能插件flexselect用法示例
這篇文章主要介紹了jquery自動補(bǔ)齊功能插件flexselect用法,結(jié)合實例形式分析了flexselect實現(xiàn)自動補(bǔ)齊功能的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-08-08
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06
基于jQuery插件實現(xiàn)環(huán)形圖標(biāo)菜單旋轉(zhuǎn)切換特效
本文給大家分享一款基于jQuery環(huán)形圖標(biāo)旋轉(zhuǎn)切換特效。這是一款鼠標(biāo)點擊圖標(biāo)菜單圓形順時針或者逆時針旋轉(zhuǎn)切換代碼。有需要的小伙伴可以參考下。2015-05-05
下面小編就為大家?guī)硪黄钊肜斫鈐Query之事件移除。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery下拉菜單的實現(xiàn)代碼的相關(guān)資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11