blocks|key|597286|text|我已经创建了一个通用的解决方案。下面的函数将更改克隆对象的ids和名称。在大多数情况下，您需要行号，因此只需向对象添加"data-+row+-id“属性即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597287|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%2B$/,+function(+strId+)+{+return+parseInt(+strId+)+%2B+1;+}+)+);
++++}

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

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

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

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

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

++++return+objClone;
}|code-block|syntax|javascript|597288|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have created a generalised solution. The function below will change ids and names of cloned object. In most cases, you will need the row number so Just add "data-row-id" attribute to the object. </p>

<pre><code>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;
}
</code></pre>


blocks|key|597331|text|这是对我有效的最简单的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|597332|$('#your_modal_id').clone().prop("id",+"new_modal_id").appendTo("target_container");|code-block|syntax|javascript|597333|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the simplest solution working for me.</p>

<pre><code>$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");
</code></pre>


blocks|key|381406|text|$('#cloneDiv').click(function(){


++//+get+the+last+DIV+which+ID+starts+with+%5E=+"klon"
++var+$div+=+$('div[id%5E="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%2B/g),+10+)+%2B1;

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

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

});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|381407|<script+src="https://code.jquery.com/jquery-3.1.0.js"></script>|381408|unstyled|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$B|C]]|$1|F|3|-4|5|G|7|K|8|@]|9|@]|A|$]]]|H|$]]



<pre class="lang-js prettyprint-override"><code>$('#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) );

});
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|381423|text|这也行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|381424|​|381425|+var+i+=+1;
+$('button').click(function()+{
+++++$('#red').clone().appendTo('#test').prop('id',+'red'+%2B+i);
+++++i%2B%2B;+
+});|code-block|syntax|javascript|381426|<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>|381427|381428|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This works too</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var i = 1;
 $('button').click(function() {
     $('#red').clone().appendTo('#test').prop('id', 'red' + i);
     i++; 
 });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="test"&gt;
  &lt;button&gt;Clone&lt;/button&gt;
  &lt;div class="red" id="red"&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
  .red {
    width:20px;
    height:20px;
    background-color: red;
    margin: 10px;
  }
&lt;/style&gt;</code></pre>
</div>
</div>
</p>


<p>I need to clone the id and then add a number after it like so <code>id1</code>, <code>id2</code>, etc. Every time you hit clone you put the clone after the latest number of the id.</p>
<pre><code>$(&quot;button&quot;).click(function() {
    $(&quot;#id&quot;).clone().after(&quot;#id&quot;);
}); 
</code></pre>


How to clone and change id?

我需要克隆id，然后在后面添加一个数字，比如id1，id2，等等。每次你点击克隆，你就把克隆放在最新的id后面。$("button").click(function() {    $("#id").clone().after("#id");}); 

问如何克隆和更改id？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何克隆和更改id？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何克隆和更改id？
EN