[JQUERY] 어떻게 jQuery를 클론 () 변경 ID로?

어떻게 jQuery를 클론 () 변경 ID로?

해결법

1. ---

   1.$ ( '# cloneDiv'). ((기능을 클릭) { // ID가 ^ = "KLON"로 시작하는 마지막 DIV를 얻을 수 VAR $ DIV = $ ( 'DIV [ID = ^ "KLON"] 마지막'); // 읽기 수와 그 DIV의 ID (즉 "klon3"3) // 그리고 1로 그 수를 증가 VAR NUM =에서는 parseInt ($의 div.prop ( "ID") 매치 (/ \ D + / g), 10). +1; // 클론이 새로운 ID를 할당 (즉 : NUM 4에서 "klon4"ID에) VAR $ KLON = $ div.clone () 소품 ( 'ID', 'KLON'+ NUM).; // 마지막으로 당신이 원하는 목적지 $ KLON 삽입 $ div.after ($ klon.text ( 'KLON'+ NUM)); }); <스크립트 SRC = "https://code.jquery.com/jquery-3.1.0.js"> <버튼의 ID가 = "cloneDiv"> 클릭 CLONE

   klon1

   klon2

   $ ( '# cloneDiv'). ((기능을 클릭) { // ID가 ^ = "KLON"로 시작하는 마지막 DIV를 얻을 수 VAR $ DIV = $ ( 'DIV [ID = ^ "KLON"] 마지막'); // 읽기 수와 그 DIV의 ID (즉 "klon3"3) // 그리고 1로 그 수를 증가 VAR NUM =에서는 parseInt ($의 div.prop ( "ID") 매치 (/ \ D + / g), 10). +1; // 클론이 새로운 ID를 할당 (즉 : NUM 4에서 "klon4"ID에) VAR $ KLON = $ div.clone () 소품 ( 'ID', 'KLON'+ NUM).; // 마지막으로 당신이 원하는 목적지 $ KLON 삽입 $ div.after ($ klon.text ( 'KLON'+ NUM)); }); <스크립트 SRC = "https://code.jquery.com/jquery-3.1.0.js"> <버튼의 ID가 = "cloneDiv"> 클릭 CLONE

   klon1

   klon2

   5 만 (않기 위해) 스크램블 - 당신이 KLON 같은 ID를 가진 많은 요소를 가지고 말. 마지막으로 나 : 여기에 우리가 갈 수없는 첫째, 그러므로 우리는 가장 높은 ID를 검색하는 메커니즘이 필요합니다 :

   CONST 모두 $ = $ ( '[ID = ^ "klon--"] "); CONST maxID = Math.max.apply (수학, $ all.map ((I, EL) => + el.id.match (/ \ D + $ / g) [0])하세요 ().); CONST nextId maxID = + 1; CONSOLE.LOG는 (`새로운 ID입니다 : $ {nextId}`);

   12

   34

   8 <스크립트 SRC = "https://code.jquery.com/jquery-3.1.0.js">

2. ---

   2.업데이트 :로 로코 C.Bulijan은 선택한 DIV 후를 삽입 .insertAfter를 사용할 필요가 .. 지적했다. 당신이 그것을 대신 여러 번 복제 할 때 시작의 끝에 추가 할 경우에도 코드를 업데이트를 참조하십시오. 데모

   업데이트 :로 로코 C.Bulijan은 선택한 DIV 후를 삽입 .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");
      }); 
   

3. ---

   3.이것은 나를위한 간단한 솔루션 작업이다.

   이것은 나를위한 간단한 솔루션 작업이다.

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

4. ---

   4.나는 일반화 된 솔루션을 만들었습니다. 이 기능은 아래의 ID와 복제 된 개체의 이름을 변경합니다. 그냥 객체에 "데이터 행 ID"속성을 추가 할 수 있도록 대부분의 경우, 행 번호가 필요합니다.

   나는 일반화 된 솔루션을 만들었습니다. 이 기능은 아래의 ID와 복제 된 개체의 이름을 변경합니다. 그냥 객체에 "데이터 행 ID"속성을 추가 할 수 있도록 대부분의 경우, 행 번호가 필요합니다.

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

5. ---

   5.이 역시 작동

   이 역시 작동

   i가 1 = VAR; $ ( '버튼'). ((기능을 클릭) { . $ ( '# 레드') 클론 () appendTo ( '# 테스트') 소품 ( 'ID', '빨간색'+ I)..; 내가 ++; }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"> <버튼> 클론

   <스타일> .red { 폭 : 20 픽셀; 높이 : 20 픽셀; 배경 색상 : 레드, 여백 : 10px; }

6. ---

   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>
   

from https://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id by cc-by-sa and MIT license