javascript - 具有新 ID 的重复 Div

Question

我有一个函数，可以复制 div 并将新 div 的 id 加 1

function duplicate(){
    // Get content to clone
    var line_to_clone = $('#fields_1').html();
    // Get new line id
    var next_line_id = $('.items').length + 1;
    // Add the div container
    var line_to_clone = '<div id="fields_' + next_line_id + '" class="items">' + line_to_clone + '</div>';
    // Create new line
    var new_line = line_to_clone.replace(/_1/gi, "_" + next_line_id);
    // Render it
    $('#renderer').append(new_line);
}

它可以工作，但是当它达到 10 时 id 是错误的

<div id="fields_8" class="items">
<div id="fields_9" class="items">
<div id="fields_100" class="items">
<div id="fields_111" class="items">
<div id="fields_122" class="items">
<div id="fields_133" class="items">
<div id="fields_144" class="items">

Answer 1

或者，您可以使用 jQuery .clone() 函数，还使用 ​​jQuery :last 获取最后一项的 id 选择器然后将其加一，然后附加新项目的 html，如下所示:

<强> jsFiddle 1

$('#btn-foo').on('click', function() {
  var lastItem = $('#renderer .items:last'),
    lastID = parseInt(lastItem.attr('id').replace('fields_', ''));
  $('#renderer').append(lastItem.clone().attr('id', "fields_" + (lastID + 1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn-foo">Add</button>
<hr>
<div id="renderer">
  <div id="fields_1" class="items"><span>Lorem ipsum dolor sit amet.</span>
  </div>
</div>

<小时/>

更新:

根据OP的评论，存在重复输入字段值的问题，而且id和name属性的值必须是唯一的，因此，在这个jsFiddle 2我们已经把它们全部修好了