Clone div和增量重命名元素ID

Question

好吧，让我们说，我有div内的表单元素。我希望能够通过使用jQuery单击按钮来克隆该div，并添加表单的版本2，因此所有元素ID都将在其名称中加1。

<div id="card"> 
    <!-- PART 1 --> 
    <h1 class="card_build">Build your card options:</h1> 

    <select id="country" name="country[]"> 
     <?php 
      include('lib/class_dbcon.php'); 
      $connect = new doConnect(); 

      $q = mysql_query("SELECT * FROM country ORDER BY country_id ASC"); 
      while($row = mysql_fetch_assoc($q)) 
      { 
       echo '<option value="'.$row['country_id'].'">'.$row['country_option'].'</option>'; 
      } 
     ?> 
    </select> 

    <select id="filter" name="filter[]"> 
     <option value="">-- Select Filter --</option> 
    </select> 

    <select id="load_choice" name="load_choice[]"> 
     <option value="">-- Select Load_choice --</option> 
    </select> 

    <select id="plastic" name="plastic[]"> 
     <option value="">-- Select Plastic --</option> 
    </select> 

    <select id="UG_tipping" name="UG_tipping[]"> 
     <option value="">-- Select UG/Tipping --</option> 
    </select> 
    <!-- PART 1 --> 
    <!-- PART 2 --> 
    <div id="part2" style="margin-top:10px;"> 
    <h1 class="card_build">Customize the card:</h1> 
    <input type="text" name="3rdLine" size="32" class="field" id="3rdLine"> 
    <input type="text" name="4thLine" size="32" class="field" id="4thLine"> 
    <input type="text" name="card_value" size="32" class="field" id="card_value"> 
    <label for="showpoints">Show "Points"?</label> 
    <input type="checkbox" value="points" class="checkbox" checked="checked"> 
    <label for="cobrand">Co-branded?</label> 
    <input type="checkbox" value="cobrand" class="checkbox" checked="checked"> 
    <textarea rows="5" name="message" class="textarea" id="message"></textarea> 
    <hr> 
    </div> 
    <!-- PART 2 --> 
</div> 
    <a href="#" onCLick="moreFields()">ADD</a> 

所以，如果你看一下这个代码和你点击添加链接它会重复结束，把它变成做同样的事情，所有的div里面的元素ID为好。作品中的一个问题是我需要5个克隆的MAXIMUM，所以脚本只能增加4倍（或者5无关紧要，只要我能看到创建最大值的方法）。

我唯一的问题是，当克隆div时，PHP注入是否会保持机智？在此先感谢，我一直在这整个夜晚都在绞尽脑汁。

Answer 1

从你的代码我认为你的主要问题是访问的唯一没有冲突的下拉组。如果是这样的话，我认为这可以在没有增加创建的每个组的每个元素的id的压力的情况下实现。如果我要这样做，我会按如下方式处理它。

首先DOM（一个例子）：

<div id="card"> 
    <div class="group"> 
     <select id="country" name="country[]"> 
      <option>select</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
     </select> 
     <select id="filter" name="filter[]"> 
      <option>select</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
     </select> 
    </div> 
</div> 
<a id="more" href="">More</a> 

然后jquery的：

$(function(){ 
    var newgroup = $('<div>').addClass('group'); 
    $('#more').click(function(e){ 
     e.preventDefault(); 
     $('.group').first().clone().appendTo(newgroup).appendTo('#card'); 
    }); 

    $('.group #country').live('change',function(){ 
     $(this).parent().find('#filter').val(1); 
    }); 
});