jquery (javascript) automatic serial number and attribute number implementation code_jquery

Automatic sequence numbering and automatic attribute numbering, the effect diagram is as follows:

Implementation principle:
Addition and deletion are reverse processes, and the implementation is consistent.
When adding, add the element append method to the parent container, set all custom attribute numbers and sequence numbers to empty, and then reassign custom attribute numbers and sequence numbers through the $.each method.

Copy code The code is as follows:

$.each(items, function (k, v) {
$(this).attr("opt", "mopt" k);
serials.eq(k).html(k);
});

When deleting, bind the event live method to all delete buttons, delete the element from the parent container with the detach method, and set all custom attribute numbers and sequence numbers to empty, and then re-customize them through the $.each method. Attribute number and sequence number assignment.

Copy code The code is as follows:

$("#test .del").live( "click", function () { //Bind click events for delete buttons
var dels = test.find(".del"); //All deleted buttons
var delnum = dels.index($ (this)); //The index value of the current delete button
var items = test.find(".item");
items.eq(delnum).detach(); //Detach it from the parent container Delete this node
items.attr("opt", "");
var serials = test.find(".serial");
serials.html("");
$. each(items, function (k, v) { //Reassign custom attributes with numbers
$(this).attr("opt", "mopt" k);
serials.eq(k). html(k);
});
});

Examples are as follows:

<title>each and live implement automatic numbering</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 select all Note:

If you need to introduce external Js, you need to refresh to execute ]