jQuery를 사용하여 HTMLDivElement의 모든 ID를 변경하십시오.

Question

jQuery를 사용하여 Django formset을 동적으로 추가하고 있습니다.

링크를 사용하여 위의 것과 동일한 다른 양식을 추가하고 있습니다. 내가 필요 사업부를 추가 할

이

var row = $("."+class_name).first().clone(true); 
row.find('input').val(''); 
$(row).removeAttr('id').hide().insertAfter("."+class_name).last().slideDown(300); 

행의 모든 ​​레이블 [0] (A HTMLDivElement와 인) id_cur-0 -... 그리고 매번 나는이 jQuery를 기능을 사용 : 나는 다음과 같은 코드를 사용하여이 작업을 수행 모든 이드는 cur 이후에 숫자를 증가시킨다. 처음 클릭 할 때마다 모든 항목에 id_cur-1이 있고 다음에 id_cur-2가 생길 것입니다 ... 등등.

HTMLDivElement를 문자열처럼 취급 할 수 있다면 기본적으로 "cur- \ d"가 발생할 때마다 정규 표현식을 사용할 수 있습니다. 어떻게하면 좋을까요? 또는 더 좋은 방법이 있습니다 (이런 종류의 해킹처럼 보이기 때문입니다).

<div class="item1"> 
    <label style="display:inline-block;" for="id_cur-0-cur_child_name"> 
    Name: 
    </label> 
    <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_name" name="cur-0-cur_child_name" type="text" /> 

    <label style="display:inline-block;" for="id_cur-0-cur_child_sex"> 
    Sex: 
    </label> 
    <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_sex" name="cur-0-cur_child_sex" type="text" placeholder="[M/F]" /> 

    <label style="display:inline-block;" for="id_cur-0-cur_child_dob"> 
    DOB: 
    </label> 
    <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_dob" name="cur-0-cur_child_dob" type="text" placeholder="e.g. 12/25/2014" /> 
</div> 

Answer 1

이되는 사항 :

여기 내 HTML의 모습입니까?

var last_id = $("."+class_name).last().attr("id").split("-")[1]; 

fiddle

UPDATE

안녕이의 ev.preventDefault는 앵커의 기본 동작을 방지하는 용도로 사용됩니다. 요소의 기본 동작을 중지합니다.

나는 당신의 HTML을보고 여기에 새 fiddle

자바 스크립트 코드 (주석)이 있습니다

$("#clone").click(function (ev) { 
    ev.preventDefault(); 

    var row = $(".item1").last().clone(true);// Last item1 
    var last_id = $(row).find("input:first").attr("id");// Grab first input id (it contains the important part: the number) 
    row.find('input').val(''); 

    $.each(row.find('input'), function (index, item) {// Change id of all inputs inside the cloned element. 
     var id = (+(last_id.split("-")[1])+1), // Grab the number and increase it. 
      new_id = $(item).attr("id").replace("id_cur-" + last_id.split("-")[1], "id_cur-" + id);// Replace ids with the new number. 
     $(item).attr("id",new_id);// Asign the new id to the inputs. You'll have to do more or less the same to the labels if you like. 
    }); 
    $(row).removeAttr('id').hide().insertAfter(".item1:last").slideDown(300);// Insert after the last item1 element. Otherwise it'll insert after all elements with class .item1 

}); 

는 희망이 도움을.

친절하게 제공합니다.

Answer 2

대신 클래스 이름으로 id_cur 사용할 수 있으며, 같은 id 속성을 가진 특정 번호 :

var last_row = $("."+class_name+":last"); 
var new_row = last_row.clone(true); 

new_row.attr('id', new_row.attr('id')+1); 
new_row.find('input').val(''); 
new_row.removeAttr('id').hide().insertAfter(last_row) 
new_row.slideDown(300); 

당신은 단순히 마지막 + 1

과 id 속성을 증가해야

설명을 위해 첫 번째로 일치하는 요소를 선택하여 var row = $("."+class_name).first().clone(true);에 복제했으나이 경우 그에 따라 ID를 증가 시키려면 추가 된 최신 요소를 복제해야합니다.

희망이 도움이됩니다.

건배,

Answer 3

나는 기본적으로 "의 Cur \ d 개"의 모든 발생을 찾기 위해 정규 표현식을 사용할 수 있습니다.

JQuery 정규식 선택기를 사용하여 모든 ID 또는 모든 attr을 찾으십시오.

1. 는 id-cur-

   $("input[@id^=id-cur-]") 
   

희망으로 시작하는 ID로 모든 입력 된 태그 요소를 선택 속성에 대한이 id-cur-

$("label[@for^=id-cur-]") 

로 시작하는 모든 라벨 태그 요소를 선택 이것은 정규 표현식으로 dom 요소를 선택하는 데 도움이 될 수 있습니다.