jQuery क्लोन डुप्लिकेट आईडी

Question

मेरे पास एक HTML तत्व है जिसमें इसके भीतर निहित अनियंत्रित सूचियों का एक बड़ा संग्रह है। मुझे इस तत्व को अलग-अलग शैलियों के साथ पृष्ठ पर कहीं और स्थानांतरित करने की आवश्यकता है (यह jQuery का उपयोग करके काफी सरल है)।

$("#MainConfig").clone(false).appendTo($("#smallConfig")); 

समस्या यह है कि सभी सूचियों और उनके संबद्ध सूची आइटम आईडी है और clone उन्हें डुप्लिकेट है। क्या संलग्न करने से पहले jQuery का उपयोग करके इन सभी डुप्लिकेट आईडी को प्रतिस्थापित करने का कोई आसान तरीका है?

Answer 1

यदि आपको उन्हें क्लोन करने के बाद सूची आइटमों का संदर्भ देने का कोई तरीका चाहिए, तो आपको कक्षाओं का उपयोग करना चाहिए, न कि आईडी। सभी id = "..." से class = "..."

यदि आप विरासत कोड या कुछ से निपट रहे हैं और कक्षाओं में आईडी नहीं बदल सकते हैं, तो आपको संलग्न करने से पहले आईडी विशेषताओं को हटा देना होगा।

$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig")); 

बस इतना याद रखें कि आप अब और अलग-अलग आइटम को संदर्भित करने के लिए एक रास्ता नहीं है कि हो सकता है। ।।।।

Answer 2

$("#MainConfig") 
    .clone(false) 
    .find("ul,li") 
    .removeAttr("id") 
    .appendTo($("#smallConfig")); 

आकार के लिए प्रयास करें। :)

[संपादित करें] redsquare की टिप्पणी के लिए फिक्स्ड।

Answer 3

यदि आपके पास पृष्ठ पर कई समान आइटम होंगे, तो कक्षाओं का उपयोग करना सबसे अच्छा है, न कि आईडी। इस तरह आप अलग कंटेनर आईडी के अंदर uls के लिए शैलियों को लागू कर सकते हैं।

Answer 4

मैं कुछ इस तरह का उपयोग करें: $ ("# विवरण") क्लोन() attr ('आईडी', 'details_clone') के बाद ("एच 1") शो();

Answer 5

चूंकि ओपी ने उन्हें जोड़ने से पहले सभी डुप्लिकेट आईडी को बदलने का एक तरीका पूछा, शायद ऐसा कुछ काम करेगा। मान लें कि आप इस जैसे एक HTML ब्लॉक में MainConfig_1 क्लोन करने के लिए चाहता था:

<div id="smallConfig"> 
    <div id="MainConfig_1"> 
     <ul> 
      <li id="red_1">red</li> 
      <li id="blue_1">blue</li> 
     </ul> 
    </div> 
</div> 

कोड निम्नलिखित की तरह कुछ, क्लोन ब्लॉक के सभी बच्चे तत्वों (और वंश) को खोजने के लिए हो सकता है, और उनके आईडी के एक का उपयोग कर संशोधित काउंटर:

var cur_num = 1; // Counter used previously. 
//... 
var cloned = $("#MainConfig_" + cur_num).clone(true, true).get(0); 
++cur_num; 
cloned.id = "MainConfig_" + cur_num;     // Change the div itself. 
$(cloned).find("*").each(function(index, element) { // And all inner elements. 
    if(element.id) 
    { 
     var matches = element.id.match(/(.+)_\d+/); 
     if(matches && matches.length >= 2)   // Captures start at [1]. 
      element.id = matches[1] + "_" + cur_num; 
    } 
}); 
$(cloned).appendTo($("#smallConfig")); 

इस तरह नए HTML बनाने के लिए:

<div id="smallConfig"> 
    <div id="MainConfig_1"> 
     <ul> 
      <li id="red_1">red</li> 
      <li id="blue_1">blue</li> 
     </ul> 
    </div> 
    <div id="MainConfig_2"> 
     <ul> 
      <li id="red_2">red</li> 
      <li id="blue_2">blue</li> 
     </ul> 
    </div> 
</div> 

Answer 6

यह रसेल के जवाब पर आधारित है, लेकिन थोड़ा अधिक सौंदर्य और रूपों के लिए कार्यात्मक। jQuery:

$(document).ready(function(){ 
    var cur_num = 1; // Counter 

    $('#btnClone').click(function(){ 

      var whatToClone = $("#MainConfig"); 
      var whereToPutIt = $("#smallConfig"); 

      var cloned = whatToClone.clone(true, true).get(0); 
      ++cur_num; 
      cloned.id = whatToClone.attr('id') + "_" + cur_num;     // Change the div itself. 

     $(cloned).find("*").each(function(index, element) { // And all inner elements. 
      if(element.id) 
      { 
       var matches = element.id.match(/(.+)_\d+/); 
       if(matches && matches.length >= 2)   // Captures start at [1]. 
        element.id = matches[1] + "_" + cur_num; 
      } 
      if(element.name) 
      { 
       var matches = element.name.match(/(.+)_\d+/); 
       if(matches && matches.length >= 2)   // Captures start at [1]. 
        element.name = matches[1] + "_" + cur_num; 
      } 

     }); 

     $(cloned).appendTo(whereToPutIt); 

    }); 
}); 

मार्कअप:

<div id="smallConfig"> 
    <div id="MainConfig"> 
     <ul> 
      <li id="red_1">red</li> 
      <li id="blue_1">blue</li> 
     </ul> 
     <input id="purple" type="text" value="I'm a text box" name="textboxIsaid_1" /> 
    </div> 
</div> 

Answer 7

Fwiw, मैं दारियो के समारोह के लिए इस्तेमाल किया है, लेकिन साथ ही प्रपत्र लेबल को पकड़ने के लिए की जरूरत है। अगर इस तरह के बयान से ऐसा करने के

एक और जोड़ें:

if(element.htmlFor){ 
var matches = element.htmlFor.match(/(.+)_\d+/); 
if(matches && matches.length >= 2)   // Captures start at [1]. 
    element.htmlFor = matches[1] + "_" + cur_num; 
} 

Answer 8

मेरा मानना ​​है कि यह सबसे अच्छा तरीका है

var $clone = $("#MainConfig").clone(false); 
$clone.removeAttr('id'); // remove id="MainConfig" 
$clone.find('[id]').removeAttr('id'); // remove all other id attributes 
$clone.appendTo($("#smallConfig")); // add to DOM.