如何克隆一個元素並一次插入多次？

Question

如何克隆一個元素並將它插入5次？當然，這是基本的語句：

$('.col').clone().insertAfter('.col'); 

這裏就是我需要得到：

<div class="col" id="original"> </div> 
<div class="col"> </div> 
<div class="col"> </div> 
<div class="col"> </div> 
<div class="col"> </div> 
<div class="col"> </div> 

的選擇並不需要使用一個唯一的ID，它也可以是一個類選擇。

我可以重複基本語句四次，但必須有一個更優雅的方式？

Answer 1

使用一個循環，就像這樣：

$(document).ready(function() { 
 
    var e = $('.col'); 
 
    for (var i = 0; i < 5; i++) { 
 
     e.clone().insertAfter(e); 
 
    } 
 
});

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

 
<div class="col">clone me...</div>

---

把元素的循環之前的變量，否則就會遇到問題時，你得到的幾個要素相同的ID是您的選擇器是基於一個id（例如$("#col1")）。

如果您的選擇器正在使用一個類，它不會導致與重複的id相同的衝突，但您仍然應該將該元素放置在循環前的變量中，否則最終會得到比您更多的元素想。

Answer 2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.col').each(function(){ 
     $(this).clone().insertAfter(this); 
    }); 
    }); 
</script> 
<div class="col">First div </div> 
<div class="col">2nd </div> 
<div class="col">3rd </div> 
<div class="col">4th </div> 
<div class="col">5th </div> 

這是你要找的？

Answer 3

我寫一個jQuery插件：

$.fn.multiply = function(numCopies) { 
    var newElements = this.clone(); 
    for(var i = 1; i < numCopies; i++) 
    { 
     newElements = newElements.add(this.clone()); 
    } 
    return newElements; 
}; 

此代碼段構建元素作爲一個jQuery集，而不是添加到DOM多次其可以是慢的。

用法：

var li = $('<li>Test</li>'); 
$('ul').append(li.multiply(4)); 

所以，你的例子：

$('.col').multiply(5).insertAfter('.col'); 

Answer 4

JavaScript數組具有填充功能：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

所以，你可以寫類似這

$(
    new Array(copies).fill(function() { 
    return $(this).clone(); 
    }.bind(el)) 
    .map(function (el) { 
    return el(); 
    }) 
).map(function() { return this.toArray(); }); //Turn into jQuery 

，如果你想讓它作爲一個jQuery的功能，你可以重複使用，你可以寫這樣的事情

$.fn.multiply = function(amount) { 
    var cloneFunction = (function() { 
    return $(this).clone(); 
    }).bind(this); 

    return $(
     new Array(amount).fill(cloneFunction).map(function(el) { 
     return el(); 
     }); 
    ).map(function() { return this.toArray(); }); //Turn into jQuery 
} 

這使您可以靈活地克隆的函數調用是分離只在需要時才進行評估。所以如果你想要你可以拆分電話並稍後評估。

意思是這樣的承諾（它返回的功能與結合上下文這一點，所謂的將克隆時）

new Array(amount).fill(cloneFunction); 

，這是分辨率

.map(function(el) { return el(); }) 

這一點最後一點處理事實上，我創建了一個jQuery對象的數組，但真的我想要一個jQuery集合

.map(function() { return this.toArray(); }); //Turn into jQuery 

，但無論如何，如果你走這條路線，你的最終解決方案看起來就像這樣。

$(el).multiply(amount).insertAfter(anotherEl); 

歡呼

Answer 5

$(document).ready(function() { 
 
    var e = $('.col'); 
 
    for (var i = 0; i < 5; i++) { 
 
     e.clone().insertAfter(e); 
 
    } 
 
});

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

 
<div class="col">clone me...</div>

`