2011-12-10 101 views
1

我試圖克隆使用jQuery的無線電組。我的克隆代碼:jQuery的克隆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的和的屬性被命名爲locationInNearcloneIndexLocation其中cloneIndexLocation是下一個增量。

我有這樣的代碼工作的一組選擇場的哪一個更新所有的ID給clonedIndex數量,但由於某種原因,我不能得到相同的代碼,甚至更新的無線電組ID的。

乾杯

+0

什麼是您的正則表達式看起來像和你確定使用+1與字符串遞增數或只是增加了「1」的ID的結束?在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/在Firefox – Thulasiram

+0

第一INSTAL螢火蟲插件。在Firefox瀏覽器中運行代碼。按F12,你會看到改變collectionIndex爲整數。 – Thulasiram