json - 遍历 DOM 并形成一个 JSON 对象

Question

我正在迭代 DOM 并尝试使用 javascript 创建一个 JSON 对象。以下是代码-

<div id="div1" class="clickDiv" style="position: absolute; left: 259px; top: 32px; border: 10px none;">

节省

当单击按钮以将 DOM id 及其各自的样式保存在 JSON 对象中时，将执行以下函数。

 function savecomm(){
var values = [];
var html = [];

$(".clickDiv").each(function() {

        values.push($(this).attr("id"));
        var styleProps = $(this).css( ["position", "left", "top"] );
        $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
        });

}); 
console.log(values);
console.log(html);

}

我在控制台中得到以下信息：-

["div1", "div2", "div3"]
["position: absolute", "left: 712px", "top: 31px", "position: absolute", "left: 872px", "top: 25px", "position: absolute", "left: 587px", "top: 19px"]

我想将 div1 与其各自的样式相关联并将其保存为 JSON 对象。例如：-

div1:[position: absolute", "left: 712px", "top: 31px",], div2:[position: absolute", "left: 602px", "top: 51px",]

任何帮助表示赞赏。提前致谢。

Answer 1

像这样，使用 ID 作为键：

function savecomm() {
    var values = {};

    $(".clickDiv").each(function () {
        var html = [];
        var styleProps = $(this).css(["position", "left", "top"]);
        $.each(styleProps, function (prop, value) {
            html.push(prop + ": " + value);
        });
        values[$(this).attr("id")] = html;
    });
    console.log(values);

}