Question

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

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

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

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

如果有人能帮助您，将非常感谢！

这是摘要的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'));

这是一个分叉的小提琴，上面概述了div，以帮助显示结构：

https://jsfiddle.net/drnsjaob/

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

1 个答案: