jquery (javascript) 自動シリアル番号と属性番号の実装 code_jquery

自動シーケンス番号付けと自動属性番号付けの効果図は次のとおりです。

実装原則:
追加と削除は逆のプロセスであり、実装は一貫しています。
追加するときは、要素の追加メソッドを親コンテナに追加し、すべてのカスタム属性番号とシーケンス番号を空に設定してから、$.each メソッドを通じてカスタム属性番号とシーケンス番号を再割り当てします。

コードをコピー コードは次のとおりです。

$.each(items, function (k , v) {
$(this).attr("opt", "mopt" k);
serials.eq(k).html(k); >
削除するときは、すべての削除ボタンにイベント ライブ メソッドをバインドし、デタッチ メソッドを使用して親コンテナから要素を削除し、すべてのカスタム属性番号とシーケンス番号を空に設定し、$ を使用して再カスタマイズします。 .each メソッドの属性番号とシーケンス番号の割り当て。

コードをコピー コードは次のとおりです: $("#test .del") .live( "click", function () { //削除ボタンのクリック イベントをバインドします

var dels = test.find(".del"); //すべての削除されたボタン

var delnum = dels.index( $ (this)); //現在の削除ボタンのインデックス値
var items = test.find(".item")
items.eq(delnum).detach();親コンテナからこのノードを削除します。
items.attr("opt", "");
var seriess = test.find(".serial"); 🎜>$. each(items, function (k, v) { //カスタム属性を数値で再割り当てします
$(this).attr("opt", "mopt" k);
serials.eq(k) ).html(k);
});


の例は次のとおりです。



それぞれとライブは自動番号付けを実装します

<title> </title> <style type="text/css"> *{margin: 0px;padding: 0px;} .cont{width:600px; margin:60px auto 0px;} #test .item{padding: 10px 6px;border-bottom: 1px solid #666666;} #test .serial{margin-right: 20px;} #test .del{padding: 6px;margin-left: 30px;} </style> <div class="cont"> <input id="btn" type="button" value="增加"><div id="test"> </div> </div>[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]