Question

我正在尝试使用jquery克隆无线电组。我的克隆代码是：

$("#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。

干杯

Answer 1

<!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>

jquery clone id update

1 个答案: