JQuery क्लोन () और आईडी कैसे बदलें?

Question

यह इतना पसंद के बाद मैं आईडी क्लोन और फिर एक नंबर जोड़ने की जरूरत है id1, id2आदि हर आप क्लोन आप आईडी के नवीनतम संख्या के बाद क्लोन डाल मारा।

$("button").click(function() {
    $("#id").clone().after("#id");
}); 

Answer 1

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


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>

---

तले हुए तत्व, उच्चतम आईडी को पुनः प्राप्त करते हैं

मान लें कि आपके पास आईडी के साथ कई तत्व हैं, जैसे कि klon--5तले हुए (क्रम में नहीं)। यहाँ हम नहीं कर सकते हैं के लिए जाना :lastया :first, इसलिए हम एक तंत्र की जरूरत उच्चतम आईडी पुनः प्राप्त करने के लिए:

const $all = $('[id^="klon--"]');
const maxID = Math.max.apply(Math, $all.map((i, el) => +el.id.match(/\d+$/g)[0]).get());
const nextId = maxID + 1;

console.log(`New ID is: ${nextId}`);

<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Comments

वर्किंग डेमो के लिए +1 :) और मेरे उत्तर को देखने के लिए धन्यवाद। मैंने पोस्ट को अपडेट किया है एक वर्किंग डेमो jsfiddle.net/HGtmR/4

— सेल्वाकुमार अरुमुगम

क्या div के अंदर एक बटन होना भी संभव है जो वर्तमान id div को हटाता है?

— user1324780

@ user1324780 हां यह संभव है, लेकिन आपको इसे नए प्रश्न के रूप में पोस्ट करना चाहिए। वैसे भी सुराग खोजने के लिए है .closest(div[id^=id])और .removeउस div।

— सेल्वकुमार अरुमुगम

पूरी तरह से मेरी जरूरत है। यह मुझे सबसे अधिक संभावना विकास के घंटे बचाया! धन्यवाद

— निकोलस मंज़िनी

Answer 2

अपडेट: जैसा कि रोको सी । बुलिजान ने बताया .. आपको उपयोग करने की आवश्यकता है। चयनित div के बाद इसे सम्मिलित करने के लिए। अपडेटेड कोड भी देखें यदि आप चाहते हैं कि यह कई बार क्लोन किए जाने पर शुरुआत के बजाय अंत में जोड़ा जाए। डेमो

कोड:

   var cloneCount = 1;;
   $("button").click(function(){
      $('#id')
          .clone()
          .attr('id', 'id'+ cloneCount++)
          .insertAfter('[id^=id]:last') 
           //            ^-- Use '#id' if you want to insert the cloned 
           //                element in the beginning
          .text('Cloned ' + (cloneCount-1)); //<--For DEMO
   }); 

---

प्रयत्न,

$("#id").clone().attr('id', 'id1').after("#id");

यदि आप एक स्वचालित काउंटर चाहते हैं, तो नीचे देखें,

   var cloneCount = 1;
   $("button").click(function(){
      $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
   }); 

Comments

आपने 'id'+ ++ idअपने कोड में उपयोग करने का एक शानदार अवसर गंवा दिया ।

— ब्लेज़मॉन्गर

@ RokoC.Buljan आप सही हैं, लेकिन सवाल यह था कि क्लोन किए गए तत्व के एट्रर को कैसे बदलना है और इसलिए मैंने नोटिस करने में चूक की .after। अद्यतन उत्तर देखें।

— सेल्वकुमार अरुमुगम

:) +1 इसे 5 पर गोल करने के लिए! ;) कांग्रेट्स का अच्छा उपयोग [id^=id]:last।

— रोको सी। बुल्जन

क्या इसे नामों पर भी लागू किया जा सकता है?

— Optiq

Answer 3

यह मेरे लिए सबसे सरल उपाय है।

$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");

Answer 4

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

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

Answer 5

यह भी काम करता है

 var i = 1;
 $('button').click(function() {
     $('#red').clone().appendTo('#test').prop('id', 'red' + i);
     i++; 
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="test">
  <button>Clone</button>
  <div class="red" id="red">
  </div>
</div>

<style>
  .red {
    width:20px;
    height:20px;
    background-color: red;
    margin: 10px;
  }
</style>

Answer 6

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


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>