遍历 html 元素 json,深层遍历节点的方法，生成对应的JSON数据

业务需求。我需要把生成的HTML结构生成对应的 JSON。自己写的始终有错误，求指导。

然后目标JSON：

var json = {

"elements": [

{

"layout": {

"value": "4-4-4",

"elements": [

{

"component": {

"widgetIdentity": "c-c:3.0",

"styleId": "4",

"properties": {}

}

},

{

"empty": {}

},

{

"component": {

"widgetIdentity": "c-c:3.0",

"styleId": "4",

"properties": {}

},

"layout": {

"value": "6-6",

"elements": [

{

"component": {

"widgetIdentity": "x-a:4.0",

"styleId": "2",

"properties": {}

}

},

{

"empty": {}

}

]

}

}

]

}

}

]

};

自己的方法：

function createROOT(elements) {

var json = {};

var data = [];

var root = $(elements).children();

$.each(root, function (i, v) {

var child = {};

child.layout = {};

child.layout.value = $(v).attr('data-layout-value');

child.layout.elements = traversalDOM2Json(v);

data.push(child);

});

json.elements = data;

return json

}

function traversalDOM2Json(elements) {

var result = [];

var key = {};

var ele = $(elements).children();

$.each(ele, function (i, v) {

var html = $.trim($(v).html());

if ( html == '') {

key.empty = {};

result.push(key);

} else {

var children = $(this).children();

$.each(children, function (i, v) {

result.push(distinguishDOMType(v));

});

}

});

return result;

};

function distinguishDOMType(elements) {

var childJSON = {};

console.log(elements)

if ( $(elements).hasClass('row') ) {

childJSON.layout = {};

childJSON.layout.value = $(elements).attr('data-layout-value');

childJSON.layout.elements = traversalDOM2Json(elements);

} else {

childJSON.component = {};

childJSON.component.widgetIdentity = $(elements).attr('data-widgetIdentity');

childJSON.component.styleId = $(elements).attr('data-styleId');

childJSON.component.properties = {};

}

return childJSON;

};

var json = createROOT('#test');

console.log(JSON.stringify(json));

输出的JSON:

{

"elements": [

{

"layout": {

"value": "4-4-4",

"elements": [

{

"component": {

"widgetIdentity": "c-c:3.0",

"styleId": "4",

"properties": {}

}

},

{

"empty": {}

},

{

"component": {

"widgetIdentity": "c-c:3.0",

"styleId": "4",

"properties": {}

}

},

{

"layout": {

"value": "6-6",

"elements": [

{

"component": {

"widgetIdentity": "x-a:4.0",

"styleId": "2",

"properties": {}

}

},

{

"empty": {}

}

]

}

}

]

}

}

]

}

也就是最后一个节点的嵌套关系始终不对。求大家指点。