Question

以下内容将被克隆。我想做的是，每当我用一个克隆克隆它时，我都会这样做。按钮，select元素的id应该在新的克隆部分中改变如下：

克隆时，选择元素的ID和名称应如下所示：

<select id="size__0__option" name="designtype[size__0__option]">
<select id="size__1__option" name="designtype[size__1__option]">
<select id="size__2__option" name="designtype[size__2__option]">

要克隆的HTML代码，但ID和名称将如上所示更改为新的克隆div：

<div class="need-opt">
   <div class="field-label">
      <label for="size__0__option" class="required"> Size</label>
   </div>
   <div class="field">
      <select id="size__0__option" name="designtype[size__0__option]">
         <option value="2.50mm (US 1.5)">2.50mm (US 1.5)</option>
         <option value="2.75mm (US 2)">2.75mm (US 2)</option>
      </select>
      <div class="errors"></div>
   </div>
</div>

//Cloned element goes here
//Cloned element goes here
//so on

Answer 1

我认为这可以帮助你。

你体内有这个：

<div class="need-opt">
   <div class="field-label">
      <label for="size0__option" class="required"> Size</label>
   </div>
   <div class="field">
      <select id="size0" name="designtype[size__0__option]">
         <option value="2.50mm (US 1.5)">2.50mm (US 1.5)</option>
         <option value="2.75mm (US 2)">2.75mm (US 2)</option>
      </select>
      <div class="errors"></div>
   </div>
</div>

<button id="btn1">Clone!</button>

头部有以下功能：

<script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $(".need-opt").clone().appendTo("body");
        var clones = $(".field").length;
        for ( var i = 1; i < clones; i++ ) {
            $(".field:eq(" + i +") :first-child").attr("id","size" + i +"");
        }
      });
    });
</script>

每次单击该按钮时，将克隆整个div元素，并在计算克隆容器后更改克隆容器中select元素的id。

克隆元素时根据当前信息更改id和名称数据

1 个答案: