Jak sklonować element i wstawić go wiele razy za jednym razem?

Question

Jak mogę sklonować element i wstawić go 5 razy, jeden po drugim? To oczywiście jest oświadczenie podstawa:

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

Oto co trzeba uzyskać:

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

Selektor nie musi być za pomocą unikalnego identyfikatora, może to być również selektor klasy.

Mogę powtórzyć podstawowe stwierdzenie cztery razy, ale musi być bardziej elegancki sposób?

Answer 1

Użyj pętli, podobnie jak to:

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

---

Umieścić element w zmiennej przed pętlą, w przeciwnym razie pojawią się problemy, gdy pojawi się kilka elementów z ten sam identyfikator to Twój selektor oparty na identyfikatorze (np. $("#col1")).

Jeśli twój selektor używa klasy, nie powoduje takich samych konfliktów jak duplikaty id, ale powinieneś umieścić element w zmiennej przed pętlą, w przeciwnym razie otrzymasz dużo więcej elementów niż ty chcieć.

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> 

Czy szukasz?

Answer 3

Napisałem wtyczkę jQuery:

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

Ten fragment kodu buduje elementy jak zestaw jQuery, zamiast dodawać do Domu kilka razy, który może być powolne.

Zastosowanie:

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

Tak, dla przykładu:

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

Answer 4

JavaScript Array posiada funkcję wypełnienia:

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

więc można napisać coś podobnego to

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

i jeśli chciałeś go jako funkcja jQuery, które można ponownie wykorzystać można napisać coś takiego

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

to daje elastyczność, aby oddzielić wywołanie funkcji klonu od bycia oceniana tylko wtedy, gdy jej potrzebujesz. Więc jeśli chcesz, możesz podzielić połączenie i ocenić później.

oznacza to obietnica (zwraca funkcje z oprawionego kontekście do tego, że kiedy nazywa się sklonować)

new Array(amount).fill(cloneFunction); 

i jest to rozdzielczość

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

i ten mały ostatni bit uchwyty Faktem jest, że stworzyłem tablicę obiektów jQuery, ale naprawdę chcę mieć kolekcję jQuery, która ma być jQuery, , ale w ostatecznym rozrachunku twoje ostateczne rozwiązanie będzie wyglądało mniej więcej tak, jeśli pójdziesz tą drogą.

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

okrzyki

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>

`