javascript - 嵌套内容的递归 JavaScript 函数过早生成结束标记

Question

我正在尝试将包含不同级别对象的 JavaScript 数组处理为包含级别和子级别的 HTML 内容。

为此，我生成 HTML 代码，然后将其插入单独的数组中。

我检查属性“subsections”，如果存在，我会再次调用该函数。

但是，在调用该函数之后，我将一个最终结束标记插入数组中，以表示当前部分已完全生成，但是，在调用该函数之前，结束标记已被插入数组中，这意味着每个都过早关闭。

如果有人可以提供帮助，那就太好了!

Here's the JSFiddle.

这里是总结的 JavaScript 代码:

            var newContent = [];
            var content = [{
                    name: 'layer1',
                    content: '<p>This is where the content for layer 1 will go. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
                },{
                    name: 'layer2',
                    content: '<p>This is where the content for layer 2 will go. Integer efficitur nulla faucibus, tempus sapien a, malesuada dui. </p>',
                    subsections: [{
                        name: 'layer2a',
                        content: '<p>This is where the content for layer 2a will go. Quisque faucibus sem id nibh efficitur venenatis.</p>'
                        ]}
                },{
                    name: 'layer3',
                    content: '<p>This is where the content for layer 3 will go. Etiam mi nibh, fermentum scelerisque eros condimentum, laoreet eleifend ante.</p>'
                },{
                    name: 'layer4',
                    content: '<p>This is where the content for layer 4 will go. Nulla dui libero, varius id lacus in, cursus vehicula massa. Sed arcu enim, molestie nec magna ullamcorper, vehicula efficitur sapien.</p>',
                    subsections: [{
                        name: 'layer4a',
                        content: '<p>This is where the content for layer 4a will go. Quisque faucibus sem id nibh efficitur venenatis.</p>',
                        subsections: [{
                                name: 'layer4b',
                                content: '<p>This is where the content for layer 4b will go. Nam id sapien auctor, egestas nulla a, cursus odio.</p>'
                        }]
                    }]
                }
            ]

            $(document).ready(function(){
                loopNestedContent(content);
                $('#output').html(newContent);
            })

            function loopNestedContent(targContent) {
                for (let i = 0; i < targContent.length; i++) {
                    newContent.push('<h3 id="' + targContent[i].name + '" class="trigger">' + targContent[i].name + '<span>+</span></h3>');
                    newContent.push('<div id="' + targContent[i].name + 'Info" class="info">');
                    newContent.push(targContent[i].content);
                    if (hasProp(targContent[i], 'subsections')) {
                        loopNestedContent(targContent[i].subsections);
                    }
                    newContent.push('</div>');
                }
            }

            $(document).on('click', '#output .trigger', function() {
                $('.helpInfo').css('display', 'none');
                $('.trigger span').html('+');
                $('#' + $(this).attr('id') + 'Info').css('display', 'block');
                $(this).children('span').html('-');
            })

            function hasProp (obj, prop) {
                return Object.prototype.hasOwnProperty.call(obj, prop);
            }

非常感谢!

Answer 1

你的函数看起来不错。问题是您将数组 newContent 传递给 html() 而不是 html 字符串。

首先尝试加入数组:

 $('#output').html(newContent.join('\n'));

这是一个 fork 的 fiddle ，其中概述了 div 以帮助显示结构:

https://jsfiddle.net/drnsjaob/