CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 35

How to store html structure in variable , jquery

please see the following code 

<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

I need to save this html structure in javascript variable . So that i used the following code 

<script>
    $(".test").each(function(){
var otext='<div class="test" style="color:'+$(".test").css("color")+';">'+$(".test").text()+'</div>';
    });
</script>

but in otext i got <div class="test" style="color:redbluegreen">123</div>. Actually what wrong in my code ? How to store all html structure and style of class test using jquery?

the desired out put is var otext =<div class="test" style="color:red">1</div><div class="test" style="color:blue">2</div><div class="test" style="color:green">3</div>;

UPDATE :

what happen if the html structure is lite this ?

<div class="test" style="color:red">1<button clss="test-button" value="remove"/></div>

and here i don't want to save this div structure without <button class="test-button">.

Upvotes: 1

Views: 3594

Answers (4)

Satpal
Satpal

Reputation: 133403

You can use .map() to iterate and create an array of string using outerHTML property of each element. 

jQuery(function($) {
  var text = $(".test").map(function() {
    return this.outerHTML
  }).get().join('');
  console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

As per comment

jQuery(function($) {
  var text = $(".test").map(function() {
    var elem = $(this).clone();
    elem.find('.test-button').remove();
    return elem.prop("outerHTML").trim();
  }).get().join('');
  console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1
  <button class="test-button" value="remove" />
</div>
<div class="test" style="color:blue">2
  <button class="test-button" value="remove" />
</div>
<div class="test" style="color:green">3
  <button class="test-button" value="remove" />
</div>

Upvotes: 3

Sudharsan S
Sudharsan S

Reputation: 15393

In your context the each loop every time the variable has been reassigned and override the values. Assign as global variable and concat it.

And use $(this) for getting current object 

var otext = '';

$(".test").each(function(){
 otext +='<div class="test" style="color:'+$(this).css("color")+';">'+$(this).text()+'</div>';
});

console.log(otext);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red">1</div>
<div class="test" style="color:blue">2</div>
<div class="test" style="color:green">3</div>

Upvotes: 3

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

You should wrap your html inside a div like

<div id="mydiv>
    <div class="test" style="color:red">1</div>
   <div class="test" style="color:blue">2</div>
   <div class="test" style="color:green">3</div>
</div>

Then use the jquery as

var html=$('#mydiv').html();

Upvotes: 1

Jigar7521
Jigar7521

Reputation: 1579

var otext = '';

in function 

otext+='<div cl......

Upvotes: 1

Related Questions