Question

几个小时以来，我一直在努力寻找解决方案。我做了一些尝试并进行了抓挠，我最接近的尝试是在这个问题的末尾。

假设我希望使用h1 ... h6标签建立目录，使用div等没有任何嵌套。该标签可以在以下情况下通知目录是父母或孩子。

例如，先h1然后h2意味着h2是h1的子代。

假设我们有一个元素数组：

// omitting other properties like 'text', etc for brevity.
[{ tag: 2 }, { tag: 2 }, { tag: 3 }, { tag: 3 }, { tag: 4 }, { tag: 2 }]

这将代表以下HTML：

<div>
    <h2>
    <h2>
    <h3>
    <h3>
    <h4>
    <h2>
</div>

我们正在寻找一棵看起来像这样的树：

[{
    tag: 2
}, {
    tag: 2
    children: [{
        tag: 3
    }, {
        tag: 3,
        children: [{
            tag: 4
        }]
    }]
}, {
    tag: 2
}]

这应该不太困难，但我只是不能把头缠住它。而不是像大多数其他问题一样使用父代引用，我严格使用数字值来表示它是否是父代。

如果少于，则为父项
如果相等，那就是兄弟姐妹
如果更大，则是孩子

这是我想出的代码，但是只能在非常有限的情况下使用。例如，如果最后一个元素之后有一个同级，则它不起作用。

谢谢！

//Loop through the array backwards
let newArr = [];
let tempArr = [];
while (arr.length) {    
    if (arr.length === 1) {
        newArr.unshift(arr.pop())
    } else {
        let item = arr.pop();

        if (tempArr.length == 0) {
            tempArr.push(item);
            item = arr.pop();
        }

        //Check if the items tag is equal to the tempArrs last item tag
        if (item.tag == tempArr[tempArr.length - 1].tag) {
            tempArr.push(item)
        } else if (item.tag < tempArr[tempArr.length - 1].tag) {



            item.children = tempArr;

            //there might be something in newArr...
            if (newArr.length && newArr[0].tag > item.tag) {
                item.children.push(newArr.pop());
            }

            newArr.unshift(item)
            tempArr = [];
        }
    }
}

Answer 1

您可以使用辅助数组来设置级别，并为起始标签取一个偏移量（假设没有较小/父标签可用）。

var array = [{ tag: 2 }, { tag: 2 }, { tag: 3 }, { tag: 3 }, { tag: 4 }, { tag: 2 }],
    offset = -array[0].tag;
    result = [],
    levels = [{ children: result }];

array.forEach(function (o) {
    levels[o.tag + offset].children = levels[o.tag + offset].children || [];
    levels[o.tag + offset].children.push(levels[o.tag + offset + 1] = o);
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

使用DIV中的h1 ... h6标签数量创建树

1 个答案: