我如何使用jQuery克隆多个HTML输入字段

Question

我有一个像这样的输入字段的复杂div

<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="address">

<div id="section_toClone">
<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>
</div>
<button id="add_more"> Add </button>

现在，当有人单击添加时，我希望发生这种情况

<input type="text" name="tree[tree1][fruit]">
<input type="text" name="tree[tree1][height]">
<input type="checkbox name tree[tree1][color] value="green">Green </input>
<input type="checkbox name tree[tree1][color] value="yellow">yellow </input>

<input type="text" name="tree[tree2][fruit]">
<input type="text" name="tree[tree2][height]">
<input type="checkbox name tree[tree2][color] value="green">Green </input>
<input type="checkbox name tree[tree2][color] value="yellow">yellow </input>

<input type="text" name="tree[tree3][fruit]">
<input type="text" name="tree[tree3][height]">
<input type="checkbox name tree[tree3][color] value="green">Green </input>
<input type="checkbox name tree[tree3][color] value="yellow">yellow </input>

依此类推.....但是我的脚本仅克隆不会将tree的值从tree1更改为tree2，再更改为tree3，依此类推....这是我的jquery脚本

 $('#add_more').click(function(){
         $("#section_toClone").clone(true).insertBefore("#add_more").find('input').val("").val('');
});

我如何自动增加？ 我想在实际的html代码中再提一件事。 它具有超过3个输入和3个复选框字段

Answer 1

甚至不必理会将数字放入数组键中。 只需让PHP自己处理一下即可：

<input name="tree[fruit][]" value="foo" />
<input name="tree[fruit][]" value="bar" />
<input name="tree[fruit][]" value="baz" />

任何没有明确指定键的[]集都将有一个由PHP生成/分配的键，最终您将获得

$_POST['tree'] = array(
     0 => 'foo',
     1 => 'bar',
     2 => 'baz'
);

只要您的表单是一致生成的，浏览器就会以与HTML中显示的顺序相同的顺序提交字段，因此可以执行以下操作：

<p>#1</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][]" value="large" />

<p>#2</p>
<input name="foo[color][]" value="puce" />
<input namke="foo[size][]" value="minuscule" />

并产生：

$_POST['color'] = array('red', 'puce');
                          |        |
$_POST['size'] = array('large', 'minuscule');

但是，如果您开始混合字段的顺序：

<p>#3</p>
<input name="foo[color][]" value="red"/>
<input name="foo[size][] value="large" />

<p>#4</p>
<input namke="foo[size][] value="minuscule" />
<input name="foo[color][] value="puce" />


$_POST['color'] = array('red', 'puce');
                               /    
                              /
$_POST['size'] = array('minuscule', 'large');

请注意它们如何反向。

Answer 2

我不会在不为它编写得如此糟糕而感到羞耻的情况下发布此文章，但是以下解决方案可以解决问题。 不好

var treeCount = 1;

 $('#add_more').click(function(){
      $("#section_toClone")
        .clone(true)
        .insertBefore("#add_more")
        .find('input')
        .val('')
        .each(function(key,element){ 
            var $element = $(element),
                oldName = $element.attr('name'),
                newName;

                if(oldName){
                  newName = oldName.replace(/tree[0-9]+/, 'tree'+(treeCount+1));
                  $element.attr('name', newName);
                }
                else {
                  treeCount--;
                }

         })
      .promise().done(function(){
        treeCount++;
      });


  });

（请不要开枪我）