2011-12-10 2 views
1

jquery를 사용하여 라디오 그룹을 복제하려고합니다. 내 복제 코드는 다음과 같습니다jquery clone id 업데이트

$("#btnAddAnotherLocation").live("click", function(){ 
    cloneIndexLocation++; 

    $("#clonedInputLocation0").clone() 
    .appendTo("#clonedInputsLocation") 
    .attr("id", "clonedInputLocation" + cloneIndexLocation) 
    .find("*").each(function(){ 
     var id = this.id || ""; 
     var match = id.match(regex) || []; 

     if(match.length == 5){ 
      this.id = match[1]+(cloneIndexLocation); 
     } 
    }).end(); 
}); 

내 cloneDiv 내용은 다음과 같습니다

은 지저분한 찾고에 대한
<div id="clonedInputLocation0" class="clonedInputLocation" style="display: none;"> 
    <div class="formLocationWrapper"> 
     <label class="labelRadioBlack labelContainsInput" for="locationInNear0"> 
      <input name="locationInNearRadio[]" id="locationInNear0" value="" type="radio" /> 
      In or near 
     </label> 
     <div class="inNearTextWrapper"> 
     <input class="myWirrlMediumFormField" type="text" name="txtLocationInNear[]" value="" /> 
    </div> 
</div> 
<div class="formLocationWrapper"> 
    <label class="labelRadioBlack labelContainsInput" for="locationAnywhereIn0"> 
     <input name="locationInNearRadio[]" id="locationAnywhereIn0" value="" type="radio" checked="checked" /> 
       Anywhere in 
    </label> 
</div> 
    <div class="" id="clonedInputLocationRemove0"> 
     <a href="javascript: void(0);">Remove location</a> 
    </div> 
</div> 

죄송합니다, 내 편집기에서 많은 청소기 사실이다.

문제는 실제 콘텐츠를 복제하는 것과는 관련이 없습니다. 정상적으로 작동합니다. 문제는 라디오 그룹 이름을 locationInNearRadio [cloneIndexLocation]로 업데이트하고 ID 및 FOR 속성의 locationInNearcloneIndexLocation 이름을 다음과 같이 변경해야한다는 것입니다. 여기서 cloneIndexLocation은 다음 증분입니다.

이 코드는 모든 ID를 clonedIndex 번호로 업데이트하는 선택 필드 그룹에서 작동하지만 어떤 이유로 인해 라디오 그룹 ID를 업데이트하기 위해 동일한 코드를 얻을 수 없습니다.

건배

+0

무엇을 당신의 정규식처럼 당신이 문자열로 하나를 사용하여이 수를 증가 시키거나 단지 ID의 마지막에 "1"을 추가하는 것이 확실합니까? jsFiddle.net의 데모가 훨씬 도움이 될 것입니다. 라이브 데모는 – Mottie

답변

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var cloneIndexLocation = 0; 
      var clonedInputLocation = $('<div></div>').append($("#clonedInputLocation0").clone()).html(); 


      $("#btnAddAnotherLocation").live("click", function() { 
       //cloneIndexLocation++; //If u remove the locatoin then index has to be changed. 

       //Or 

       cloneIndexLocation = $('#clonedInputsLocations div').length; 

       $(clonedInputLocation.replace(/collectionIndex/gi, cloneIndexLocation)).appendTo("#clonedInputsLocations"); 
       $('#clonedInputsLocations div').show(); 
      }); 
     });  
    </script> 
</head> 
<body> 
    <!--where you need to replace by cloneIndexLocation use (collectionIndex) word in there. it wiil replace it by number.--> 
    <div id="clonedInputLocation0" class="clonedInputLocation" style="display: none;"> 
     <div class="formLocationWrapper"> 
      <label class="labelRadioBlack labelContainsInput" for="locationInNear0"> 
       <input name="locationInNearRadio[collectionIndex]" id="locationInNear0" value="" 
        type="radio" /> 
       In or near 
      </label> 
      <div class="inNearTextWrapper"> 
       <input class="myWirrlMediumFormField" type="text" name="txtLocationInNear[collectionIndex]" 
        value="" /> 
      </div> 
     </div> 
     <div class="formLocationWrapper"> 
      <label class="labelRadioBlack labelContainsInput" for="locationAnywhereIn0"> 
       <input name="locationInNearRadio[collectionIndex]" id="locationAnywhereIn0" value="" 
        type="radio" checked="checked" /> 
       Anywhere in 
      </label> 
     </div> 
     <div class="" id="clonedInputLocationRemove0"> 
      <a href="javascript: void(0);">Remove location</a> 
     </div> 
    </div> 
    <input type="button" id="btnAddAnotherLocation" value="AddAnotherLocation" /> 
    <div id="clonedInputsLocations"> 
    </div> 
</body> 
</html> 
+0

이 링크를 참조하십시오 : http://jsfiddle.net/nanoquantumtech/FSBdY/ – Thulasiram

+0

first instal firebug addons in firefox. 파이어 폭스 브라우저에서 코드를 실행하십시오. f12 키를 누르면 변경된 collectionIndex가 정수로 표시됩니다. – Thulasiram