11

要素のクローンを作成して、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を使用する必要はなく、クラスセレクターにすることもできます。

基本ステートメントを4回繰り返すこともできますが、もっとエレガントな方法が必要ですか？

4

6 に答える 6

23

次のようなループを使用します。

$(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と同じ競合は発生しませんが、ループの前に要素を変数に配置する必要があります。そうしないと、必要以上の要素が発生することになります。

于 2012-05-03T06:38:33.313 に答える
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>

これはあなたが探しているのですか？

于 2012-05-03T07:02:01.077 に答える
1

私はjQueryプラグインを書きました：

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

このコードスニペットは、低速になる可能性のあるDOMに複数回追加するのではなく、要素をjQueryセットとしてビルドします。

使用法：

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

だから、あなたの例のために：

$('.col').multiply(5).insertAfter('.col');
于 2015-11-17T16:19:10.283 に答える
0

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

乾杯

于 2016-06-24T21:08:43.300 に答える
0 

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

`

于 2017-05-08T19:45:49.603 に答える
0

クライアントによって行われた変更のクローンを作成する準備ができたら、フィールドのクローンを作成することをお勧めします。これは主に入力に関するアクティブな問題です。次に、次のことを行う必要があります。

  1. ドキュメントの準備ができた要素のクローンを作成します。var elementClone = $('#element').clone()

  2. クリックして、複製された要素を再度複製し、追加しますelementClone.clone().insertAfter(element)

于 2019-05-27T08:35:29.277 に答える