Question

我克隆div并在末尾添加它（appendTo();）我希望在点击按钮后立即追加重复的div。截至目前，它正在最后添加div。

任何解决方案？

Answer 1

这就是.appendTo方法的作用。您可以改为使用.insertAfter方法：

// cache the target element
var $parent = $(this).closest(".clonedInput");
// clone the target element 
// and insert the cloned object after the target element 
$parent.clone().insertAfter($parent);

请注意，我使用了closest方法而不是parents方法，因为您只想选择第一个/最接近的匹配父元素。 parents是一种贪婪的方法。

Answer 2

您可以使用方法.after() .insertAfter()。请查看下面的代码段。

＆＃13;

//Clone js
var count = 1;
function clone(){
  if (count < 5) {
    var newOne = $(this).closest(".clonedInput").clone(true);
    newOne.find('button.clone').css({'background':'#'+Math.random().toString(16).slice(-6)});
    //background just to show where it landed
    newOne.insertAfter($(this).closest(".clonedInput"));
    count++;
  } 
}
$(".Counter_Play").on("click", 'button.clone', clone);

＆＃13;

.al_icons,.clonedInput,.main_icoset{position:relative;overflow:hidden}.clone{display:block;background-color:red;padding:10px}.clonedInput{margin-top:30px;background:#f5f5f5}.IconTest{background:green;width:100px;height:30px;text-align:center;margin-bottom:20px}.main_icoset{width:100%;height:30px}.al_icons{width:34px;height:20px;background-color:#263238;color:#fff;font-size:7px;line-height:22px;text-align:center;float:left;margin-right:2px;display:none;margin-top:5px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
show hide icons from selected dropdown within the same div. 
<div class="Counter_Play">
  <div class="col s12 l12 m12 First_sec clonedInput">
    Attach only aftter this if this button pressed
    <div class="col s2 m2 l2">
      <button class="clone btn-floating btn-small waves-effect waves-light red counter_start_btn" >
        <i class="material-icons">Duplicate</i>
      </button>
    </div>
  </div>
</div>

＆＃13;

Answer 3

简短的回答是使用.insertAfter而不是appendTo，尽管你提供的小提琴有几个问题。

最值得注意的问题是您在点击时注册了重复操作。在你的HTML和JS中。

<button class="clone btn-floating btn-small waves-effect waves-light red counter_start_btn" onclick="clone();">

和

$("button.clone").on("click", clone);

随意学习我对最关键点的修订：

http://jsfiddle.net/thomasmars/kgm50e43/17/

appendTo（）;单击按钮后，jquery添加div

3 个答案: