1

Precisa pegar o conteúdo de várias div's com classes iguais. Por exemplo:

<div class='conteudo'>
 <li>Conteúdo 1</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 2</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 3</li>
</div>

Quero pegar tudo que tiver dentro das classes minhaDiv e exibir em outra div, de forma que fique assim:

<div class='minhaDiv'>
 <li>Conteudo 1</li>
 <li>Conteudo 2</li>
 <li>Conteudo 3</li>
</div>

Já fiz com jquery .text() e de fato funciona, mas preciso que as tags <li> sejam "pegas" também. Como posso fazer isso?

2
  • Uma dúvida, a div com classe minhaDiv já vai estar criada e é preciso apenas adicionar o conteúdo dos elementos <li> ou a <div> vai ser criada junto com o JavaScript? 4/12/2016 às 18:46
  • Você leu sobre li e ul que postei?
    – Reptile
    5/12/2016 às 11:35

3 Respostas 3

2

Tem várias formas de fazer...uma delas é:

Primeiro você concatena todo o conteúdo das divs de classe conteudo e coloca todos os htmls dentro de um array.

Depois coloca todo o conteúdo do array na sua div resultado.

var conteudoArr = [];

$(".conteudo").each(function () {
  conteudoArr.push($(this).html());
  });

$(".resultado").html(conteudoArr.join(""));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='conteudo'>
 <li>Conteúdo 1</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 2</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 3</li>
</div>

Div Resultado \/
<div class='resultado'>
</div>

2

Ao invés de .text(), use .html() junto com .each, assim:

$(function() {
     $("#testar").click(function() {
         var htmlStr = "";
       
         $(".conteudo").each(function() {
             htmlStr += $(this).html();
         });
       
         $(".minhaDiv").html(htmlStr);
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='conteudo'>
 <li>Conteúdo 1</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 2</li>
</div>

<div class='conteudo'>
 <li>Conteúdo 3</li>
</div>

<hr>

<button id="testar">Clique aqui para testar</button>

<div class="minhaDiv"></div>

Note uma coisa importante, as tags LI não deve ser usada dentro de outros elementos, os elementos que elas devem ser usadas são <OL> e <UL>, então pode mudar para isto:

$(function() {
     $("#testar").click(function() {
         var htmlStr = "";
       
         $(".conteudo").each(function() {
             htmlStr += $(this).html();
         });
       
         $(".minhaDiv").html(htmlStr);
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class='conteudo'>
 <li>Conteúdo 1</li>
</ul>

<ul class='conteudo'>
 <li>Conteúdo 2</li>
</ul>

<ul class='conteudo'>
 <li>Conteúdo 3</li>
</ul>

<hr>

<button id="testar">Clique aqui para testar</button>

<ul class="minhaDiv"></ul>

As margens e espaços remova com CSS

2
  • 1
    respondemos no mesmo segundo com a mesma ideia e implementações "diferentes".. rs +1 4/12/2016 às 19:01
  • 1
    @MarllonNasser deixei um up pra ti também
    – Reptile
    4/12/2016 às 19:03
1

Não tenho certeza se é correto usar um item de uma lista sem uma lista.

No puro Javascript fica assim:

<body onload="getbyclass()">
    <ul class='conteudo'>
        <li>Conteúdo 1</li>
    </ul>
    <ul class='conteudo'>
        <li>Conteúdo 2</li>
    </ul>
    <ul class='conteudo'>
        <li>Conteúdo 3</li>
    </ul>
    <hr>
    <div id='test'>Resultado</div>
</body>
<script>
function getbyclass()
{
	var content = document.getElementsByClassName('conteudo'),
	    minhaLi = document.createElement("li"),
	    minhaUl,
	    contlenght = content.length;
	    minhaUl = "<ul>";
	    for(var i = 0; i < contlenght; i++)
	    {
	        minhaUl += "<li>" + content[i].innerText + "</li>";
	    } 
	    minhaUl += "</ul>";
	    document.getElementById("test").innerHTML = minhaUl; 
}
</script>

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 .