如何使用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到cloning的duplicate-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）.duplicate-me類的clone的元素。

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克隆和附加多個元素？

回答

相關問題