Picking up content within multiple Ivs

Asked

Viewed 2,005 times

1

You need to take 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 take everything inside the classes minhaDiv and display in another div, so that it stays 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 tags <li> be "whores" too. How can I do that?

javascript jquery html

  • A doubt, the div with class minhaDiv will already be created and you just need to add the contents of the elements <li> or the <div> will be created together with Javascript?

  • You read about li and ul that I posted?

3 answers

2


There are several ways to do...:

First you concatenate all the contents of the class Ivs conteudo and puts all the htmls inside one array.

Then put all the contents of array in your 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

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

$(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 an important thing, LI tags should not be used inside other elements, the elements they should be used are <OL> and <UL>, then you can switch 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>

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

Remove margins and spaces with CSS

  • 1

    we respond in the same second with the same idea and "different" implementations.. rs +1

  • 1

    @Marllonnasser left one up for you too

1

I’m not sure it’s right to use a list item without a list.

In pure Javascript 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>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.