带有子项和属性的 JSON 输出 jQuery div 容器

Posted 2023-05-07

【中文标题】带有子项和属性的 JSON 输出 jQuery div 容器

【英文标题】：JSon Output jQuery div Containers with Children & Attributes

【发布时间】：2015-02-12 11:55:50

【问题描述】：

我目前正在使用 jsPlumb 并在保存和加载容器时陷入困境。我想出了如何保存端点、连接和位置。 但我不知道如何保存 div 容器，包括它们的属性、孩子和孩子的属性。 这是容器的sn-p，有什么想法可以将它们串起来吗？

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

【参考方案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