Làm thế nào để nhân bản một phần tử và chèn nó nhiều lần trong một lần?

Question

Làm thế nào tôi có thể sao chép một phần tử và chèn nó 5 lần ngay sau mỗi phần tử khác? Điều này tất nhiên là báo cáo kết quả cơ sở:

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

Dưới đây là những gì tôi cần phải nhận được:

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

Bộ chọn không cần phải sử dụng một id duy nhất, nó cũng có thể là một bộ chọn lớp.

Tôi chỉ có thể lặp lại tuyên bố cơ sở bốn lần nhưng phải có một cách thanh lịch hơn?

Answer 1

Sử dụng một vòng lặp, như thế này:

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

---

Đặt phần tử trong một biến trước khi vòng lặp, nếu không bạn sẽ chạy vào các vấn đề khi bạn nhận được một số yếu tố với cùng một id là công cụ chọn của bạn dựa trên id (ví dụ: $("#col1")).

Nếu bộ chọn của bạn đang sử dụng một lớp, nó không gây ra xung đột giống như id trùng lặp, nhưng bạn vẫn nên đặt phần tử vào một biến trước vòng lặp, nếu không bạn sẽ có nhiều yếu tố hơn bạn muốn.

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> 

đây có phải là bạn đang tìm kiếm không?

Answer 3

Tôi đã viết một 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; 
}; 

Đoạn mã này xây dựng các yếu tố như là một tập jQuery, thay vì thêm vào DOM nhiều lần mà có thể chậm.

Cách sử dụng:

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

Vì vậy, ví dụ bạn:

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

Answer 4

Javascript Mảng có chức năng điền:

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

Vì vậy, bạn có thể viết một cái gì đó như này

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

và nếu bạn muốn nó như là một hàm jQuery mà bạn có thể tái sử dụng bạn có thể viết một cái gì đó như thế này

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

này mang lại cho bạn sự linh hoạt để tách các cuộc gọi chức năng clone từ là chỉ được đánh giá khi bạn cần. Vì vậy, nếu bạn muốn bạn có thể chia nhỏ cuộc gọi và đánh giá sau.

nghĩa đây là lời hứa (nó sẽ trả về chức năng với bối cảnh ràng buộc này mà khi gọi sẽ sao chép)

new Array(amount).fill(cloneFunction); 

và đây là độ phân giải

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

và chút cuối cùng này xử lý các thực tế là tôi đã tạo một mảng các đối tượng jQuery nhưng thực sự tôi muốn có một bộ sưu tập jQuery

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

nhưng ở bất kỳ tỷ lệ nào, giải pháp cuối cùng của bạn sẽ trông giống như thế này, nếu bạn đi tuyến đường này.

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

cổ vũ

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>

'