La duplication d'un élément et de l'insérer plusieurs fois en une seule fois?

Comment puis-je cloner un élément et d'un insert de 5 fois les uns après les autres? Bien sûr, cela est la base de la déclaration:

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

Voici ce que j'ai besoin d'obtenir:

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

Le sélecteur n'a pas besoin d'être à l'aide d'un identifiant unique, il peut aussi être un sélecteur de classe.

Je pouvais juste répéter la base de l'énoncé de quatre fois, mais il doit y avoir un moyen plus élégant?

OriginalL'auteur uriah | 2012-05-03

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

    est-ce que vous cherchez?

    OriginalL'auteur arun

  2. 1

    J'ai écrit un plug-in jQuery:

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

    Cet extrait de code génère les éléments jQuery ensemble, au lieu d'ajouter au DOM plusieurs fois ce qui peut être lente.

    Utilisation:

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

    Donc, pour votre exemple:

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

    OriginalL'auteur Alex W

  3. 0

    Tableau Javascript a un remplissage de la fonction:

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

    De sorte que vous pourriez écrire quelque chose comme ceci 

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

    et si vous voulait en fonction jQuery que vous pouvez ré-utiliser, vous pouvez écrire quelque chose comme ceci

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

    cela vous donne la possibilité de séparer l'appel de la fonction de clone d'être évaluée uniquement lorsque vous en avez besoin. Donc si vous voulez vous pourrait diviser l'appel et d'évaluer plus tard.

    sens c'est la promesse (il retourne fonctions liées contexte à ce que, lorsque appelés clone)

    new Array(amount).fill(cloneFunction);

    et c'est la résolution

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

    et ce petit dernier bit gère le fait que j'ai créé un tableau de jQuery objets, mais vraiment je veux un jQuery collection

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

    mais en tout cas votre solution finale devrait ressembler à quelque chose comme ça, si vous aller dans cette voie.

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

    acclamations

    OriginalL'auteur lvalencia