Как сохранить HTML структуру в переменной, JQuery

Question

см следующий код

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

Мне нужно сохранить этот HTML структуру в JavaScript переменной. Так что я использовал следующий код

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

но в otext я получил <div class="test" style="color:redbluegreen">123</div>. Собственно, что не так в моем коде? Как сохранить всю структуру html и стиль теста класса с помощью jquery?

желаемые из пут 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:

, что произойдет, если HTML структура облегченное это?

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

и здесь я не хочу, чтобы сохранить эту Div структуру без <button class="test-button">.

Answer 1

Вы можете использовать .map() для итерации и создать массив строки, используя outerHTML свойство каждого элемента.

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>

Согласно комментарий

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>

Answer 2

В вашем контексте каждый цикл каждый раз, когда переменная переназначена и переопределяет значения. Назначьте глобальную переменную и выполните ее.

И использовать $(this) для получения текущего объекта

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>

Answer 3

var otext = ''; 

в функции

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

Answer 4

Вы должны обернуть HTML внутри DIV как

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

Затем с помощью JQuery как

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