1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Html: Repetir div (e o seu conteudo) .

Discussão em 'Web Development' iniciada por kold_Zero, 13 de Dezembro de 2013. (Respostas: 7; Visualizações: 2642)

  1. kold_Zero

    kold_Zero Power Member

    Antes de mais só informar que sou relativamente novo a mexer em Html / Javascript / Css!

    Imaginem o seguinte: Tenho uma div que no seu interior tem outras divs mais pequenas (ou botões ou texto).
    Crio toda a estrutura para defenir esta div.

    Mas agora quero usar exactamente a mesma div com o mesmo conteudo novamente na pagina. Tenho que repetir o codigo todo outra x? Ou existe uma forma de repetir Div e todo o seu conteudo?

    Exemplo:
    http://jsfiddle.net/bxztB/3/
    Se quiser voltar a repetir a div mãe e todo o seu conteudo (os filhos) tenho que repetir as tags html?

    obg!
     
  2. HLopes

    HLopes Power Member

    Se usares jquery e qualquer coisa do estilo:

    Código:
    var i = 1;
    div_to_clone = jQuery('.geral');
    for (i=1;i<10;i++){
      appendto = jQuery('.geral').eq(jQuery('.geral').length-1);
      div_to_clone.clone().appendTo(appendto);
    }
    
    essa div será clonada 10 vezes.

    Coloquei esse código no fiddle para experimentares.
     
    Última edição: 13 de Dezembro de 2013
  3. kold_Zero

    kold_Zero Power Member

    Muito obrigado! Era mais ou menos isso que procurava!
    Não estou mto familiarizado com jquery..

    Já agora se não for perguntar muito:
    Imaginemos que temos a seguinte estrutura:

    <div class="geral">
    <div id="azul1"></div>
    <div id="vermelhor1"></div>
    </div>

    E agora ao clonar a div quero tb que os id's das div's de dentro incrementem (para não se repetirem) e para poder por conteudos diferentes em cada um deles.. há maneira de fazer isso?
    Se calhar não estou a abordar o problema da melhor maneira.. mas ser iniciante dá nisto..

    Obg pela disponibilidade
     
  4. guruhuru

    guruhuru Power Member

    claro,
    declaras o atributo ID com a variavel no final durante o for...loop, ou seja:

    $('.elemento').attr('id', 'filho'+variavel);

    Se ninguem responder, faço um demo mais tarde.
     
  5. HLopes

    HLopes Power Member

    Código:
    var i = 1;
    var hm = 10;
    div_to_clone = jQuery('.geral');
    for (i;i<=hm;i++){
        if(i>1){
          appendto = jQuery('.geral').eq(jQuery('.geral').length-1).parent();
          div_to_clone.clone().appendTo(appendto);
        }
        jQuery('.geral').eq(jQuery('.geral').length-1).attr('id', 'div-'+i);
    }
    
    Dei-lhe uns retoques, é só alterares a variável "hm" para o número de cópias que queres. Se no total quiseres 10 divs, metes hm = 10.
     
  6. kold_Zero

    kold_Zero Power Member

    Isso está quase perfeito!
    Muito obrigado pela ajuda :)
     
  7. Estou com o mesmo problema, porém, não sei utilizar jQuery, alguém poderia auxiliar?

     
  8. Sem ter conhecimento de jQuery ou outra library/framework JavaScript, só utilizando JavaScript nativo ...

    Fica um exemplo -> https://jsfiddle.net/styujw98/
     

Partilhar esta Página