Question

我有一个简单的表单，并且有一个按钮可以在单击时克隆我的表单。问题是，当我第一次点击按钮时，它工作正常，但是在下次点击时会附加许多div。有没有办法每次点击一个一个地复制？这是我的片段：

＆＃13;

$(document).ready(function() {
    $(".Add").click(function() {
        $(".formi").clone().insertAfter(".formi:last");
    });
});

＆＃13;

.formi {
    border: 1px solid #000;
    width: 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
            <option value="">one</option>
            <option value="">two</option>
        </select>
        <button type="submit">ok</button>
    </form>
</div>

＆＃13;

Answer 1

您可以找到第一个表单，而不是使用eq(0)在DOM中查找所有表单或查找最近的表单，

$(document).ready(function(){
    $(".Add").click(function(){
		  $(".formi").eq(0).clone().insertAfter(".formi:last");
//$(".formi:last").clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Answer 2

$(".formi").clone().克隆页面上提供的所有.formi元素。您只需要克隆通过模板附加的第一个.formi元素而不是.formi。

$(".Add").click(function(){
    var $formTemplate = $(".formi:first");
    $formTemplate.clone().insertAfter(".formi:last");
});

Answer 3

使用first()，first()方法返回所选元素的第一个元素。

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").first().clone().insertAfter(".formi:last");

  });
});

.formi {
	border: 1px solid #000;
	width: 50%;
}

<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Answer 4

您需要使用.eq()方法仅克隆第一个，这会将匹配元素集减少到指定索引处的元素。

请试试这个：

$(".formi").eq(0).clone().insertAfter(".formi:last");

参考文献：

eq method

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().insertAfter(".formi:last");

  });
});

.formi {
  border: 1px solid #000;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>

Answer 5

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi").eq(0).clone().insertAfter(".formi:last");
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Answer 6

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi:nth-child(1)").clone().insertAfter(".formi:last");

  });
});

.formi {
  border: 1px solid #000;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
  </form>
</div>

添加:nth-child(1)，这样您就只能克隆第一个。

Answer 7

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi:last").clone().insertAfter(".formi:last");

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

Answer 8

使用:nth-child(1)

＆＃13;

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi:nth-child(1)").clone().insertAfter(".formi:last");

    });
});

＆＃13;

.formi{border:1px solid #000;width:50%;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name"/>
<select name="cars">
<option value="">one</option>
<option value="">two</option>
</select>
<button type="submit">ok</button>
</form>
</div>

＆＃13;

Answer 9

我有评论，你犯了错误，这将是什么可能的解决方案

$(document).ready(function() {
$(".Add").click(function() {
//Mistake : when you are clicking second time, you clone both the forms having class '.formi'
$(".formi").clone().insertAfter(".formi:last");

// $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); : This one will work

  });
});

每次点击jQuery clone div

9 个答案: