jquery(javascript) 자동 일련번호 및 속성 번호 구현 code_jquery

자동 시퀀스 번호 지정 및 자동 속성 번호 지정, 효과 다이어그램은 다음과 같습니다.

구현 원칙:
추가 및 삭제는 역 프로세스이며 구현이 일관됩니다.
추가 시 상위 컨테이너에 요소 추가 메소드를 추가하고 모든 사용자 정의 속성 번호와 시퀀스 번호를 비워둔 다음 $.each 메소드를 통해 사용자 정의 속성 번호와 시퀀스 번호를 다시 할당합니다.

코드 복사 코드는 다음과 같습니다.

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

삭제 시 이벤트 라이브 메소드를 모든 삭제 버튼에 바인딩하고, detach 메소드로 상위 컨테이너에서 요소를 삭제하고, 모든 커스텀 속성 번호와 시퀀스 번호를 비워둔 후, $를 통해 다시 커스텀화합니다. .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 serials = test.find(".serial")
serials.html(""); 🎜>$.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 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]