appendTo(); jquery add div после нажатия кнопки

Question

Я клонирую div и добавляю его в конец (appendTo();) Я хочу, чтобы дублированный div добавлялся сразу после нажатия кнопки. На данный момент он добавляет divs в конец.

Любое решение?

Моя скрипка: http://jsfiddle.net/kgm50e43/15/

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(). Пожалуйста, проверьте снимок ниже.

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

.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}

<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>

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/