बदलने विभिन्न आईडी के jQuery

Question

में क्लोनिंग मैं एक तालिका पंक्ति क्लोन और इनपुट क्षेत्रों को प्रतिबिंबित करने के लिए कई आईडी के अद्यतन करने के लिए कोशिश कर रहा हूँ के बाद। मैं ऐसा करके शुरू करता हूं और यह काम करता है:

$(id).clone().attr("id", "newId"); 

जो मेरी मुख्य तालिका पंक्ति की आईडी को नए आईडी में बदल देता है। तालिका पंक्ति में मेरे पास अन्य आईडी है जिसे बदलने की आवश्यकता है। उदाहरण के लिए:

<input type="text" id="input_1"> 

करने के लिए बदल जाएगा:

<input type="text" id="input_2"> 

मैंने सोचा कि यह पहचान-पत्र को बदलने के लिए कुछ इस तरह होगा:

$(id).clone().attr("id", "newId").("#input_1").attr("id", "input_2"); 

यह काम नहीं करता। मैं इसे कैसे ठीक कर सकता हूं ताकि सभी आईडी का परिवर्तन हो? तुम्हारे पास है के रूप में जब से तुम एक समारोह कॉल वंचित हो रहे हैं

Answer 1

कार्यक्रम दुर्घटना होगा।

इसके बजाए इसे आजमाएं। कॉल सूचना find() रहे हैं:

$(id).clone().attr("id", "newId").find("#input_1").attr("id", "input_2"); 

यह शायद बेहतर होगा एक चर में क्लोन संदर्भित करने के लिए पहले।

var $clone = $(id).clone(); 

$clone.attr("id", "newId").find("#input_1").attr("id", "input_2"); 
$clone.find("#someElement").attr("id","someElement_2"); 
$clone.find("#someOtherElement").attr("id","someOtherElement_2"); 

यदि आप चाहें तो अपने क्लोन के वंशजों के लिए एक समय में आईडी विशेषताएँ सेट कर सकते हैं। कई देखते हैं, और अगर यदि आप आईडी के लिए संगत प्रतिमान है, तो आप की संभावना कुछ थोड़ा अधिक स्वचालित करने के लिए सक्षम हो जाएगा।

---

संपादित करें:

यहाँ स्वचालित रूप से $clone में सभी आईडी को अद्यतन करने के उदाहरण है।

कृपया ध्यान दें कि यह आप के लिए काम नहीं कर सकता के रूप में यह मानता है कि सभी आईडी एक संख्या के साथ समाप्त होता है।

var $clone = $(id).clone(); // Create your clone 

     // Get the number at the end of the ID, increment it, and replace the old id 
$clone.attr('id',$clone.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; })); 

    // Find all elements in $clone that have an ID, and iterate using each() 
$clone.find('[id]').each(function() { 

    //Perform the same replace as above 
    var $th = $(this); 
    var newID = $th.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; }); 
    $th.attr('id', newID); 
}); 

Answer 2

मैं पाया है जब मैं .clone का एक बहुत करते हैं() सामान यह एक आईडी गुण के बजाय एक वर्ग का उपयोग करने के लिए बेहतर है। इस तरह से आप को क्लोन कर सकते हैं, फिर भी एक ज्ञात इकाई (वर्ग) द्वारा इसे संदर्भ, और अभी भी एक .eq()

Answer 3

मैं एक सामान्यीकृत समाधान बनाया है के माध्यम से तत्व समूह में एक सूचकांक के माध्यम से अनन्य मिलता है। नीचे दिया गया कार्य आईडी और क्लोन ऑब्जेक्ट के नाम बदल देगा। ज्यादातर मामलों में, आपको पंक्ति संख्या की आवश्यकता होगी ताकि ऑब्जेक्ट में बस "डेटा-पंक्ति-आईडी" विशेषता जोड़ें।

function renameCloneIdsAndNames(objClone) { 

    if(!objClone.attr('data-row-id')) { 
     console.error('Cloned object must have \'data-row-id\' attribute.'); 
    } 

    if(objClone.attr('id')) { 
     objClone.attr('id', objClone.attr('id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; })); 
    } 

    objClone.attr('data-row-id', objClone.attr('data-row-id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; })); 

    objClone.find('[id]').each(function() { 

     var strNewId = $(this).attr('id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; }); 

     $(this).attr('id', strNewId); 

     if($(this).attr('name')) { 
      var strNewName = $(this).attr('name').replace(/\[\d+\]/g, function(strName) { 
       strName = strName.replace(/[\[\]']+/g, ''); 
       var intNumber = parseInt(strName) + 1; 
       return '[' + intNumber + ']' 
      }); 
      $(this).attr('name', strNewName); 
     } 
    }); 

    return objClone; 
}