Skip to main content
adicionou 27 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
var num = 1;
var clone = $('.form-modelo').clone();
clone.attr('class', 'form-real');
var num = 1;
$('.form-real:last').append(clone);
$('.form-real:last').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});
$('#form-container').append(clone);


Com as modificações note que some uma div`temos um container:

<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 id='form-container'>
    <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>
</div>
  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;
  • definido um #form-container para inserir os forms, caso vá usar mais de um.

TODO: remover a necessidade da div extra no HTML :P

var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').clone();
  clone.attr('class', 'form-real');
  $('.form-real:last').append(clone);
  $('.form-real:last').children().each( function() {
    $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
  });
  $('#form-container').append(clone);
}
#id_form-__prefix__-nome {border:2px solid blue;}
#id_form-1-nome {border:2px solid red;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}
<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='formid='form-real'><container'></div>
var clone = $('.form-modelo').clone();
clone.attr('class', 'form-real');
var num = 1;
$('.form-real:last').append(clone);
$('.form-real:last').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});


Com as modificações note que some uma div`:

<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>
  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;

TODO: remover a necessidade da div extra no HTML :P

var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').clone();
  clone.attr('class', 'form-real');
  $('.form-real:last').append(clone);
  $('.form-real:last').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;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}
<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>
var num = 1;
var clone = $('.form-modelo').clone();
clone.attr('class', 'form-real');
clone.children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});
$('#form-container').append(clone);


Com as modificações temos um container:

<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 id='form-container'>
    <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>
</div>
  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;
  • definido um #form-container para inserir os forms, caso vá usar mais de um.
var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').clone();
  clone.attr('class', 'form-real');
  clone.children().each( function() {
    $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
  });
  $('#form-container').append(clone);
}
#id_form-__prefix__-nome {border:2px solid blue;}
#id_form-1-nome {border:2px solid red;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}
<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 id='form-container'></div>
adicionou 594 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
var clone = $('.form-modelo').childrenclone().;
clone.attr('class', 'form-real');
var num = 1;
$('.form-real'real:last').append(clone);
 
$('.form-real'real:last').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});


Nota: usei .contents()fiz umas mudanças 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 .contents(), comoComo está no seu código original:


Com.contents(), note que some uma div as modificações note que some uma div`:

Alterações:

  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;

TODO: remover a necessidade da div extra no HTML :P

var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').contents().clone();
var num =clone.attr('class', 1;'form-real');
  $('.form-real'real:last').append(clone);
 
  $('.form-real'real:last').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;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}
<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>
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 ) );
});


Nota: usei .contents() 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 .contents(), como está no seu código original:


Com.contents(), note que some uma div:

var clone = $('.form-modelo').contents().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>
var clone = $('.form-modelo').clone();
clone.attr('class', 'form-real');
var num = 1;
$('.form-real:last').append(clone);
$('.form-real:last').children().each( function() {
  $(this).attr('id', $(this).attr('id').replace( /__prefix__/, num ) );
});


Nota: fiz umas mudanças 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.


Como está no seu código original:


Com as modificações note que some uma div`:

Alterações:

  • acrescentado clone.attr('class', 'form-real'); para mudar o nome da div dinamicamente;
  • usado $('.form-real:last').append(clone); para adicionar ao final de outras já existentes, caso queira vários inputs numerados;

TODO: remover a necessidade da div extra no HTML :P

var num;
for( num = 1; num <= 5; num++ ) {
  var clone = $('.form-modelo').clone();
  clone.attr('class', 'form-real');
  $('.form-real:last').append(clone);
  $('.form-real:last').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;}
#id_form-2-nome {border:2px solid cyan;}
#id_form-3-nome {border:2px solid green;}
#id_form-4-nome {border:2px solid orange;}
#id_form-5-nome {border:2px solid magenta;}
<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>
Usei um misto de contents e children
Fonte Link
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 ) );
});


Nota: usei .childrencontents() 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 .childrencontents(), como está no seu código original:

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


Com.childrencontents(), note que some uma div:

<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').childrencontents().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'>
<real'></div>

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


Nota: 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(), como está no seu código original:

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


Com.children(), note que some uma div:

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

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


Nota: usei .contents() 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 .contents(), como está no seu código original:

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


Com.contents(), note que some uma div:

<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').contents().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>

adicionou 12 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando