Comment jQuery clone() et modifier l'id?

J'ai besoin de cloner l'id, puis ajouter un nombre après elle comme id1, id2, etc. Chaque fois que vous frappez clone de vous mettre le clone d'après le dernier numéro de la pièce d'identité.

$("button").click(function() {
    $("#id").clone().after("#id");
});
InformationsquelleAutor user1324780 | 2012-04-12
  1. 186

    JS:

    $('#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) );

});

    HTML:

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

    • +1 pour le Travail de la démo 🙂 et Merci pour regarder sur ma réponse. J'ai mis à jour le post a également ajouté un travail de démonstration jsfiddle.net/HGtmR/4
    • est-il également possible d'avoir un bouton à l'intérieur de la div qui supprime l'id de la div?
    • Oui c'est possible, mais vous devez poster que comme une nouvelle question. De toute façon l'idée est de trouver le .closest(div[id^=id]) et .remove div.
    • si gentil homme pour, ligne par ligne, expression
    • s'adapter parfaitement à mon besoin. Il m'a sauvé des heures de développement le plus probable! merci
    InformationsquelleAutor Roko C. Buljan
  2. 39

    Mise à jour: Comme Roko C. Bulijan souligné.. vous avez besoin d'utiliser .insertAfter pour l'insérer après le div. Voir aussi le code à jour si vous voulez, il est ajouté à la fin au lieu de commencer quand cloné à plusieurs reprises. DÉMO

    Code:

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

    Essayer,

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

    Si vous voulez un compteur automatique, puis voir ci-dessous,

       var cloneCount = 1;
   $("button").click(function(){
      $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
   });
    • Vous avez manqué une grande occasion d'utiliser 'id'+ ++ id dans votre code.
    • Pouvez vous s'il vous plaît fournir un travail de démonstration? jsfiddle.net/HGtmR
    • Vous avez raison, mais la question était de savoir comment modifier l'attribut de l'élément cloné et j'ai donc manqué de remarquer la .after. Voir mise à jour de réponse.
    • 🙂 +1 pour arrondir à 5 ! 😉 belle utilisation de [id^=id]:last Félicitations.
    • peut-il être appliqué aux noms aussi?
    InformationsquelleAutor Selvakumar Arumugam
  3. 2

    J'ai créé une solution universelle. La fonction ci-dessous va changer les id et les noms de l'objet cloné. Dans la plupart des cas, vous aurez besoin du numéro de ligne si Juste ajouter "data-ligne-attribut id de l'objet. 

    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;
}
    InformationsquelleAutor Piyush Balapure
  4. 1

    C'est la solution la plus simple de travailler pour moi.

    $('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");
    InformationsquelleAutor Hassan Mehmood
  5. 0
    $('#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>
    InformationsquelleAutor Hezal M. Tank