কীভাবে 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 :) এবং আমার উত্তরটি দেখার জন্য ধন্যবাদ। আমি পোস্টটি আপডেট করেছি একটি ওয়ার্কিং ডেমোও

— সেলভাকুমার আরুমুগাম

ডিআইডি-র ভিতরে এমন একটি বোতাম থাকাও সম্ভব যা বর্তমান আইডি ডিভটি সরিয়ে দেয়?

— ব্যবহারকারী 1324780

@ ব্যবহারকারী 1324780 হ্যাঁ এটি সম্ভব, তবে আপনার এটি একটি নতুন প্রশ্ন হিসাবে পোস্ট করা উচিত। যাইহোক ক্লুটি হ'ল .closest(div[id^=id])এবং .removeসেই ডিভটি খুঁজে পাওয়া।

— সেলভাকুমার আরুমুগাম

আমার প্রয়োজন পুরোপুরি ফিট। এটি সম্ভবত আমার উন্নয়নের কয়েক ঘন্টা বাঁচায়! ধন্যবাদ

— নিকোলাস মানজিনি

Answer 2

আপডেট: রোকো সি। বুলিজন যেমন উল্লেখ করেছেন .. আপনি নির্বাচিত ডিভের পরে এটি সন্নিবেশ করার জন্য .insertAfter ব্যবহার করতে হবে। একাধিকবার ক্লোন করা হয়ে শুরু করার পরিবর্তে শেষের দিকে সংযুক্ত করতে চাইলে আপডেট কোডটিও দেখুন। ডেমো

কোড:

   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।

— ব্লেজমোনজার

@ রোকসি.বুলজান আপনি ঠিক বলেছেন, তবে প্রশ্নটি ছিল কীভাবে ক্লোন করা উপাদানটির অ্যাটর পরিবর্তন করা যায় এবং তাই আমি এই বিষয়টি খেয়াল করতে মিস করি .after। আপডেট উত্তর দেখুন।

— সেলভাকুমার আরুমুগাম

:) +1 এটিকে 5 করতে হবে! ;) [id^=id]:lastঅভিনন্দনের দুর্দান্ত ব্যবহার ।

— রোকো সি বুলজান

এটিও কি নামগুলিতে প্রয়োগ করা যেতে পারে?

— অপটিক

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>