JSon Output jQuery div Контейнеры с детьми и атрибуты

Question

Я в настоящее время работаю с jsPlumb & застрял при сохранении &, загружая контейнеры. Я выяснил, как сохранить конечные точки, соединения & позиций. Но я не могу понять, как сохранить контейнеры div, включая их атрибуты, детей & детские аттрубы.
Вот фрагмент контейнеров, любые идеи, как их укорачивать?

<div class="window main node ui-draggable _jsPlumb_endpoint_anchor_" id="maincontainer1" data-nodetype="main" style="left: 663px; top: 200px; width: 230px; height: 200px;"> 
 
\t <div class="ctrl_container"> 
 
\t \t <div class="button_rm">x</div> 
 
\t </div> 
 
\t <div class="layer" id="layercontainer1_1" style="height: 80px; width: 100%; background: none repeat scroll 0% 0% transparent;"> 
 
\t \t <div class="window filter node" style="left:25px; top:5px;" name="3#2#ABC#" id="filtercontainer2_1_1"> 
 
\t \t \t <div class="ctrl_container"> 
 
\t \t \t \t <a class="filter_caption edit" href="#">Edit</a> 
 
\t \t \t \t <div class="button_rm">x</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="details_container"> 
 
\t \t \t \t <span id="filter_label" class="filter_label jtextfill" style="font-size: 22px;">PrimarySupportGrp = 123</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="layer" id="layercontainer1_2" style="height: 90px; width: 100%; background: none repeat scroll 0% 0% rgba(0, 255, 255, 0.4);"><div class="line-separator"></div> 
 
\t \t <div class="window filter node" style="left:25px; top:5px;" name="5#4#Yes#" id="filtercontainer2_2_1"> 
 
\t \t \t <div class="ctrl_container"> 
 
\t \t \t \t <a class="filter_caption edit" href="#">Edit</a> 
 
\t \t \t \t <div class="button_rm">x</div> 
 
\t \t \t </div> 
 
\t \t \t <div style="" class="details_container"> 
 
\t \t \t \t <span id="filter_label" class="filter_label jtextfill" style="font-size: 14px;"> Site &gt; Yes</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Я не предлагаю сохранения полной иерархии детей, но если вы хотите - почему бы не использовать .html()

var data = []; 
$(".layer").each(function(){ 
    var html = $(this).html(); 
    data.push(html); 
}); 

ИЛИ

Просто сохраните то, что требуется для повторной обработки их в правильном положении - слева, сверху и т.д.

for(var i=0 ; i<length; i++){ 
    var layerTemplate = "...div template html goes here"; 
    var $layerTemplate = $(layerTemplate); 
    $layerTemplate.css({top : data[i].top , left : data[i].left}); 
    $("#maincontainer1").append($layerTemplate); 
} 

Некоторое время назад я написал сценарий для сохранения & повторного рендеринга jsPlumb - https://github.com/nitinsurana/jsPlumb-Persistence