क्लोन() एक तत्व एन बार कैसे क्लोन करें?

Question

मेरे पास एक गतिशील तालिका है जिसे मैं jQuery के साथ <col> तत्व संलग्न करना चाहता हूं। मैं (एन) संख्या संलग्न करना चाहते हैं

var tds = jQuery("tr > td").length; // count how many tds 
jQuery("#colgroup-compare > col").clone() // clone 
    .appendTo('#colgroup-compare'); // and append 

जाहिर है यह केवल संलग्न कर देता है 1 <col>,:

मैं इस किया है। यह मैं कैसे करूंगा?

मेरे पास लंबाई है, मेरे पास क्लोन क्षमता है, अब मैं इसे कैसे जोड़ूं?

Answer 1

एक पाश के साथ

:

var $col = $("#colgroup-compare > col"); 
for(var i = 0; i < n; i++){ 
    $col.clone().appendTo('#colgroup-compare'); 
} 

आप अपने पाश में jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); उपयोग नहीं कर सकते क्योंकि वह पुनरावृत्तियों> 0 में अधिक कॉलम संलग्न करेंगे ...

यह अनुकूलित किया जा सकता है:

var $colgroup = $('#colgroup-compare'); // this saves the colgroup collection to avoid recomputing it later 
var $col = $colgroup.children("col"); // this makes the clonable col(s) from the col children of $colgroup 
for (var i=n; i-->0;){ // n times (from n-1 to 0) 
    $colgroup.append($col.clone()); // append a clone of the col(s) 
} 

संपादित करें: अपनी पहली पंक्ति में th को गिनने के लिए, आप यह कर सकते हैं:

var n=$("tr").first().children('th').length; 

Demonstration

Answer 2

एक for पाश का उपयोग करें:

for(var i = 0; i < n; i++){ 
    jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); 
} 

यह त्वरित और गंदी था, और मैं कैशिंग निहितार्थ के माध्यम से नहीं सोचा था। डाइस्ट्रॉय का समाधान बेहतर है।

Answer 3

(इस से बचने के लिए एक से अधिक पंक्ति पर भरोसा कर) आप गहरी क्लोन नहीं करना चाहते हैं, तो आप एक सरणियों के तत्व की outerHTML पास करके मैनुअल यात्रा से बच सकते हैं join() विधि एक HTMLString तत्वों की n संख्या के लिए इसी में जिसके परिणामस्वरूप के रूप में नीचे दिखाया गया है:

var elementString = new Array(++n).join($(selector).get(0).outerHTML) 

जो आप किसी भी तत्व को आप चाहते हैं करने के लिए जोड़ सकते हैं।

---

अपने मामले में आप कर सकते हैं:

var n= $("tr > td").length, 
$colgroup = $("#colgroup-compare"); 
$colgroup.append(new Array(++n).join($colgroup.find("col").get(0).outerHTML));