Как клонировать и добавлять несколько элементов на место с помощью jQuery?

Что такое простой способ дублирования каждого элемента в классе как родного брата? Например, он должен изменить этот HTML:Как клонировать и добавлять несколько элементов на место с помощью jQuery?

<body> 
    <div> 
     <h1> Foos </h1> 
     <span class='duplicate-me'> foo </span> 
    </div> 
    <div> 
     <h1> Bars </h1> 
     <span class='duplicate-me'> bar </span> 
    </div> 
</body>

в:

<body> 
    <div> 
     <h1> Foos </h1> 
     <span class='duplicate-me'> foo </span> 
     <span class='duplicate-me'> foo </span> 
    </div> 
    <div> 
     <h1> Bars </h1> 
     <span class='duplicate-me'> bar </span> 
     <span class='duplicate-me'> bar </span> 
    </div> 
</body>

Благодарности

источник

2016-12-14 Zachary Nagler

$('.duplicate-me').after(function() { 
    return $(this).clone(); 
});

Используйте после метода с JQuery и вызвать метод клонирования в функции вы передаете к нему.

Ссылки: http://api.jquery.com/after/

http://api.jquery.com/clone/

Пример: https://jsfiddle.net/2y6cqLrq/

источник

2016-12-14 17:17:46

Отлично работает для меня, спасибо –

Там вы идете - append к родительскому элементу после cloningduplicate-me элемента.

Смотреть демо ниже:

$(function(){ 
 
    $('.duplicate-me').each(function(){ 
 
    $(this).parent().append($(this).clone()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <h1> Foos </h1> 
 
    <span class='duplicate-me'> foo </span> 
 
    </div> 
 
    <div> 
 
    <h1> Bars </h1> 
 
    <span class='duplicate-me'> bar </span> 
 
    </div> 
 
</body>

источник

2016-12-14 17:16:34 kukkuz

Хотя это работает на примере HTML, он не ставит клонов, как братья и сестры, в непосредственной близости к оригиналам –

он работает здесь! хорошо, а что такое реальная ситуация - я имею в виду настоящий HTML? – kukkuz

Пример не был исчерпывающим.Я попытался предположить «рядом», сказав «на месте» и «дублировать», но, возможно, я мог бы быть более ясным. –

Все, что вам нужно:

1) Clone элементы с .duplicate-me класса.

2) Добавить эти элементы в closest div, то есть их parent.

Пожалуйста, попробуйте следующее:

$('.duplicate-me').each(function(){ 
    var clone= $(this).clone(); 
    $(this).closest('div').append(clone); 
});

Ссылки:

$('.duplicate-me').each(function(){ 
 
    var clone= $(this).clone(); 
 
    $(this).closest('div').append(clone); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <h1> Foos </h1> 
 
    <span class='duplicate-me'> foo </span> 
 
    </div> 
 
    <div> 
 
    <h1> Bars </h1> 
 
    <span class='duplicate-me'> bar </span> 
 
    </div> 
 
</body>

источник

2016-12-14 17:17:50

downvoter, пожалуйста, комментарий! – kukkuz

@kukkuz, Да, вы правы, я не знаю, почему я получаю downvote? :( –

@kukkuz, я голосую за ваш ответ, чтобы снова получить 2 очка :) –

Используйте insertAfter вставить дубликат элемента, созданных с помощью clone только рядом с ним

$(function(){ 
 
    $('.duplicate-me').each(function(){ 
 
    $(this).clone().insertAfter($(this)) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div> 
 
    <h1> Foos </h1> 
 
    <span class='duplicate-me'> foo </span> 
 
    </div> 
 
    <div> 
 
    <h1> Bars </h1> 
 
    <span class='duplicate-me'> bar </span> 
 
    </div> 
 
</body>

источник

2016-12-14 17:19:39 bugwheels94

FWIW, не нужно использовать второй '$()' в '$ (this) .clone(). InsertAfter ($ (this))', просто '$ (this) .clone(). insertAfter (this)' отлично. –

Как клонировать и добавлять несколько элементов на место с помощью jQuery?

ответ

Смежные вопросы