Get content inside multiple divs

Question

Get content inside multiple divs

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

1

You need to grab the contents of several div's with equal classes. For example:

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

I want to get everything I have inside the minhaDiv classes and display in another div, so that it looks like this:

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

I've done it with jquery .text() and it actually works, but I need the <li> tags to be "grabbed" too. How can I do this?

javascript html jquery

asked by anonymous 04.12.2016 / 19:37

3 answers

2

Instead of .text() , use .html() along with .each , like this:

$(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><divclass='conteudo'><li>Conteúdo1</li></div><divclass='conteudo'><li>Conteúdo2</li></div><divclass='conteudo'><li>Conteúdo3</li></div><hr><buttonid="testar">Clique aqui para testar</button>

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

Note one important thing, LI tags should not be used inside other elements, the elements they should use are <OL> and <UL> , so you can change to this:

$(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><ulclass='conteudo'><li>Conteúdo1</li></ul><ulclass='conteudo'><li>Conteúdo2</li></ul><ulclass='conteudo'><li>Conteúdo3</li></ul><hr><buttonid="testar">Clique aqui para testar</button>

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

Margins and spaces remove with CSS

04.12.2016 / 20:00

1

I'm not sure if it's right to use an item in a list without a list.

In pure Javascript it looks like this:

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

05.12.2016 / 01:23

How to construct this regular expression? Help to populate an array with objects using a while

score 2 · Accepted Answer

There are several ways to do it ... one of them is:

First you concatenate the entire contents of the% div class and set all htmls within conteudo .

Then put all of the content of array into your array div.

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>