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); 
    }); 
});