如何在ul和li中使用jquery渲染嵌套的JSON

Question

我正面临两个问题 1.我没有得到正确的HTML结构，见下图

目前我正在获取html结构：

我在寻找html结构：

1. 如何为动态JSON制作我的代码，例如，我的JSON可能有4级子菜单，但我将无法编写那么多的循环和条件，所以尝试从json渲染并编写嵌套循环

以下是我尝试的代码：

 var input = "[2030,2031,2032,2033,2034]";
 var output = input.Replace("[", string.Empty).Replace("]", string.Empty).Split(',');

的jsfiddle

https://jsfiddle.net/pxhupap1/

Answer 1

这就是你要找的东西吗？

$(document).ready(function() {

    var treeJson = {
        "values": [{
                "tree_title": "FashionWorld1",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld2",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld3",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld4",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            }
        ]
    };
    var treeParentArr = treeJson.values;
    var tree = buildNodes(treeJson, $("#tree"));
});

function buildNodes(node, parent) {
    $(node.values).each(function() {
        var element = this;
        var listItem = $("<li />", {
            text: this.tree_title
        })
        if (this.hasOwnProperty("child")) {
            var tree = $("<ul />");
            buildNodes(this.child[0], tree);
            listItem.append(tree)
        }
        parent.append(listItem);
    });
}

JSFiddle

但有一个问题：为什么你需要values里面的嵌套child，因为它包含一个数组，你可以使用例如childs来保存值对象？