javascript - 如何从深层 li 结构创建 json 输出

Question

我有 ol li 结构作为 html，我想从中创建 JSON，但我的代码没有创建我需要的 JSON。谁能帮我解决一下吗？

我需要创建这样的 JSON

[
        {"en":"Menu1","enlink":"#enlink1","tr":"Menü 1","trlink":"#trlink1","data":[
            {"en":"Menu1-1","enlink":"#enlink1-1","tr":"Menü 1-1","trlink":"#trlink1-1","data":[
                {"en":"Menu1-1-1","enlink":"#enlink1-1-1","tr":"Menü 1-1-1","trlink":"#trlink1-1-1"},
                {"en":"Menu1-1-2","enlink":"#enlink1-1-2","tr":"Menü 1-1-2","trlink":"#trlink1-1-2"}
            ]},
        ]},
        {"en":"Menu2","enlink":"#enlink2","tr":"Menü 2","trlink":"#trlink2","data":[
            {"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"},
            {"en":"Menu2-1","enlink":"#enlink2-1","tr":"Menü 2-1","trlink":"#trlink2-1"}
        ]},
        {"en":"Menu3","enlink":"#enlink3","tr":"Menü 3","trlink":"#trlink3"}
        ]

我的示例代码是..

var buildJson = function (root){
	if(!root){
		root='#domenu-en';
	}
	var result = [];
	$(' ol > li ',root).each(function() {
		if($(this).children("ol").length){
			result.push({"en":$(this).attr("data-en"),"data":buildJson($(this))});
			//return false;
		} else{
			result.push({"en":$(this).attr("data-en")});
		}
	});
 return result;
}
$('#results').val(JSON.stringify(buildJson()))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="domenu-en">
<ol>
	<li data-enlink="#enlink1" data-en="Menu1" data-trlink="#trlink1" data-tr="Menü 1">
		<ol>
			<li data-enlink="#enlink1-1" data-en="Menu1-1" data-trlink="#trlink1-1" data-tr="Menü 1-1">
				<ol>
					<li data-enlink="#enlink1-1-1" data-en="Menu1-1-1" data-trlink="#trlink1-1-1" data-tr="Menü 1-1-1">
					</li>
					<li data-enlink="#enlink1-1-2" data-en="Menu1-1-2" data-trlink="#trlink1-1-2" data-tr="Menü 1-1-2">
					</li>
				</ol>
			</li>
		</ol>
	</li>
	<li data-enlink="#enlink2" data-en="Menu2" data-trlink="#trlink2" data-tr="Menü 2">
		<ol>
			<li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1">
			</li>
			<li data-enlink="#enlink2-1" data-en="Menu2-1" data-trlink="#trlink2-1" data-tr="Menü 2-1">
			</li>
		</ol>
	</li>
	<li data-enlink="#enlink3" data-en="Menu3" data-trlink="#trlink3" data-tr="Menü 3">
	</li>
</ol>
</div>
<textarea id="results" style=" height: 279px;"></textarea>

Answer 1

我发现解决方案非常简单，以防万一有人需要我喜欢分享它。如果我们告诉 jQuery 选择第一个 li 作为 ol:first >li 那么它会生成与 li 结构相同的层次结构。

var buildJson = function (root){
if(!root){
    root='#domenu-en';
}
var result = [];
$('ol:first > li ',root).each(function() {
var itemdata = {};
$.each($(this).data(), function(key, value) {
  itemdata[key] = value;
});

    if($(this).children("ol").length){

  itemdata["data"] = buildJson($(this));
    }

result.push(itemdata);
});
 return result;
}