Skip to main content
1 de 5
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Usando JQuery:

var clone = $('.form-modelo').children().clone();
var num = 1;
$('.form-real').append(clone);

$('.form-real').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});

Notar que usei .children() ao clonar. Da forma como estava, você estava gerando um .form-real dentro de uma cópia da div .form-modelo, acredito que não seja o resultado desejado:

Sem .children():

<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div class='form-real'>
    <div class='form-modelo'>
        <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
        <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
    </div>
</div>

Deixei assim:

<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div class='form-real'>
    <input id="id_form-1-nome" name="form-1-nome" type="text">
    <input id="id_form-1-texto" name="form-1-texto" type="text">
</div>


Demo:

var clone = $('.form-modelo').children().clone();
var num = 1;
$('.form-real').append(clone);

$('.form-real').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});
#id_form-__prefix__-nome {border:2px solid blue;}
#id_form-1-nome {border:2px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-modelo'>
    <input id="id_form-__prefix__-nome" name="form-__prefix__-nome" type="text">
    <input id="id_form-__prefix__-texto" name="form-__prefix__-texto" type="text">
</div>
<div class='form-real'></div>

Largato
  • 92,9mil
  • 18
  • 190
  • 261