2

Tenho uma div onde são adicionados múltiplos fieldsets e logo abaixo um hr:

inserir a descrição da imagem aqui

O conteúdo da div é dinâmico podendo ter 3 ou mais fieldsets. No meu código só consegui pegar o conteúdo que está dentro do primeiro. Como posso pegar todo o fieldset?

Aqui está o código da minha página:

<html>
    <head><title></title></head>
    <body>
        <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>            
    </body>
</html>

E aqui o script:

document.getElementById("CopiaUltimoConteudo").innerHTML = 
         document.getElementById("BlocosDinamicos").querySelector("fieldset").innerHTML;

4 Respostas 4

2

Se quiseres usar somente o ultimo fieldset podes usar :last-child assim:

var fieldset = document.querySelector('#BlocosDinamicos fieldset:last-child');
document.getElementById("CopiaUltimoConteudo").innerHTML = fieldset.innerHTML;
    <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>   

Se quiseres de todos os fieldset podes fazer assim:

var fieldsets = document.querySelectorAll('#BlocosDinamicos fieldset');
document.getElementById("CopiaUltimoConteudo").innerHTML = [].map.call(fieldsets, function(el){ return el.innerHTML}).join('');
    <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>   

3
  • 1
    Boa resposta. Acho que o primeiro ponto ficaria melhor se ficasse var fieldset = document.querySelector('#BlocosDinamicos fieldset:last-child'); Porque se existir varias divs com fieldset vai parar na primeira Commented 29/12/2016 às 15:47
  • @TiagoGomes sim, verdade. Vou juntar à resposta para clarificar. Obrigado.
    – Sergio
    Commented 29/12/2016 às 15:49
  • 1
    Perfeito! Obrigado @Sergio! :D
    – CleberTXR
    Commented 29/12/2016 às 16:01
1

O html ser o que voce tem.:

<html>
<head><title></title></head>
<body>
    <h3>Multiplos Fieldsets</h3>
    <br>
    <div id="BlocosDinamicos">
        <fieldset><legend></legend>
            <p>Conteudo 1</p>
        </fieldset>
        <fieldset><legend></legend> 
            <p>Conteudo 2</p>
        </fieldset>
        <fieldset><legend></legend> 
            <p>Conteudo 3</p>
        </fieldset>
    </div>
    <hr />
    <div id="CopiaUltimoConteudo"></div>            
</body>

O javascript.:

var obj = document.getElementById("BlocosDinamicos");
document.getElementById("CopiaUltimoConteudo").innerHTML = obj.getElementsByTagName('fieldset')[obj.getElementsByTagName('fieldset').length-1].innerHTML;

Este javascript vai pegar no ultimo elemento fieldset dentro da DIV BlocosDinamicos.

1

Você obter todos os filhos do elemento BlocosDinamicos e concatenar o conteúdo dos que forem fieldset:

var fildsets = document.querySelectorAll('#BlocosDinamicos fieldset');

var content = [].map.call(fildsets, fieldset => fieldset.innerHTML).join('');

document.getElementById("CopiaUltimoConteudo").innerHTML = content;
<h3>Multiplos Fieldsets</h3>
<br>
<div id="BlocosDinamicos">
  <fieldset>
    <legend></legend>
    <p>Conteudo 1</p>
  </fieldset>
  <fieldset>
    <legend></legend>
    <p>Conteudo 2</p>
  </fieldset>
  <fieldset>
    <legend></legend>
    <p>Conteudo 3</p>
  </fieldset>
</div>
<hr />
<div id="CopiaUltimoConteudo"></div>

2
  • 2
    Lucas, você pode selecionar os fields com um document.querySelectorAll('#BlocosDinamicos fieldset'), fazendo um map neles retornando seu innerHTML e fazendo o .join(''), no final, passando como "texto". Aceita a sugestão? jsfiddle.net/e5bts285 Commented 29/12/2016 às 14:42
  • Claro @SamirBraga! Gostei, dessa forma fica mais otimizado. Muito obrigado :)
    – BrTkCa
    Commented 29/12/2016 às 16:10
1

Todo o fieldset:

var fieldsets = document.querySelectorAll('#BlocosDinamicos')

n = []

fieldsets.forEach(element => {
  n.push(element.innerHTML);
  });

O ultimo:

document.querySelector('#BlocosDinamicos').lastChild;
 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .