JSon 输出 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;">
 <div class="ctrl_container">
  <div class="button_rm">x</div>
 </div>
 <div class="layer" id="layercontainer1_1" style="height: 80px; width: 100%; background: none repeat scroll 0% 0% transparent;">
  <div class="window filter node" style="left:25px; top:5px;" name="3#2#ABC#" id="filtercontainer2_1_1">
   <div class="ctrl_container">
    <a class="filter_caption edit" href="#">Edit</a>
    <div class="button_rm">x</div>
   </div>
   <div class="details_container">
    <span id="filter_label" class="filter_label jtextfill" style="font-size: 22px;">PrimarySupportGrp =  123</span>
   </div>
  </div>
 </div>
 <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>
  <div class="window filter node" style="left:25px; top:5px;" name="5#4#Yes#" id="filtercontainer2_2_1">
   <div class="ctrl_container">
    <a class="filter_caption edit" href="#">Edit</a>
    <div class="button_rm">x</div>
   </div>
   <div style="" class="details_container">
    <span id="filter_label" class="filter_label jtextfill" style="font-size: 14px;"> Site   &gt;  Yes</span>
   </div>
  </div>
 </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

JSon 输出 jQuery div 具有子项和属性的容器

JSon Output jQuery div Containers with Children & Attributes

javascript

json

save

jsplumb