JS/jQuery - 从标题元素中创建多维数组（或 JSON 结构）答案

【问题标题】：JS/jQuery - Create multi-dimensional array (or JSON structure) out of heading elementsJS/jQuery - 从标题元素中创建多维数组（或 JSON 结构）
【发布时间】：2013-08-04 17:24:19
【问题描述】：

让我们假设一个这样的 HTML 结构：

<div id="relevantHeadings">
    <h1>First Heading</h1>
    <h2>First Subheading</h2>
    <div>
        <!-- for clarification that the headings are not necessarily siblings -->
        <h2>Second Subheading</h2>
    </div>
    <h1>Second Heading</h1>
    <h1>Third Heading</h1>
    <h1>Fourth Heading</h1>
    <h2>Third Subheading</h2>
    <h1>Fith Heading</h1>
</div>

编辑：标题不一定是彼此的兄弟。

我需要的是这个：

'menu': {
    'level':[
    {
        'label': 'First Heading',
        'level' :[
        {
            'label': 'First Subheading'
        },
        {
            'label': 'Second Subheading'
        }]
    },
    {
        'label': 'Second Heading'
    },
    {
        'label': 'Third Heading'
    },
    {
        'label': 'Fourth Heading',
        'level' :[
        {
            'label': 'Third Subheading'
        }]
    },
    {
        'label': 'Fith Heading'
    }]
}

我的实际代码比label 具有更多的属性和更多的维度/级别。

到目前为止，我已经尝试了很多次，但我不知道如何正确地将子数组推送到数组的一项中：

this.allHeadings = $('#relevantHeadings').find('h1, h2, h3, h4, h5, h6');

this.obj = {};
this.obj['level'] = [];

this.allHeadings.each(function(i) {

    if($(this).is('h1')) {
        thiz.obj['level'].push(this);
    } else if($(this).is('h2')) {
        // create and push this one into thiz.obj['level'][i-1]['level']
    }

});

【问题讨论】：

看看stackoverflow.com/q/17419747
不是我需要的。我可能应该在前面提到这一点 - 构建导航的脚本已经完成。它从 JSON 结构构建导航。现在我需要编写一个脚本，将我的 DOM 转换为那个 JSOn 结构。提供的链接跳过了整个 JSON 过程，这对我来说是不可能的
当然可以，但是调整脚本以使用 JSON 树而不是 DOM 树很简单。
正如我所说：我的用例要复杂得多。大多数时候 JSON 结构是由一些服务器端脚本给出的，我只需要处理它。从 DOM 构建导航的选项只是当前脚本的一个选项，因此有必要首先构建 JSON 结构。（巨大的项目，巨大的公司，不能改变前提:-()
不，从 DOM 构建 json 结构并不比从 DOM 构建导航结构更复杂。算法是一样的。

标签： jquery arrays multidimensional-array

【解决方案1】：

我很确定这就是你想要的：

http://jsfiddle.net/Iber/a8Kgj/ 用于测试检查控制台。

代码如下：

function findNodes(step, $this) {
    var selector = null;
    var object = {};
    object['level'] = [];
    if ($this) selector = $this.next('h' + step);
    else selector = $("h" + step);

    selector.each(function () {
        var innerObject = {
            label: $(this).text()
        };
        var nextHeading = findNodes(step + 1, $(this));
        if (nextHeading.level.length > 0) {
            innerObject.level = nextHeading;
        }
        object['level'].push(innerObject);
    });

    return object;
}
console.log(findNodes(1));

【讨论】：

虽然我认为您的代码很棒（说真的），但还是有一些缺陷。 1. $this.next 在每个h1 之后不包含多个h2 2. $this.next 仅适用，如果所有标题都是兄弟，这就是为什么我首先收集所有标题。（我应该在问题中明确表示） 3. 最后的数组有一个小凸起：{"level":[{"label":"First Heading","level":{"level":[{"label":"First Subheading","level":{... 这个：level: { 'level': [...]} 是错误的。应该是level: [ {label..}, {label..}]

【解决方案2】：

好的，我明白了。这是最丑陋的代码，如果比我聪明的人有一点时间，我希望你能清理它并将其作为答案发布，以便我接受它。我敢肯定有办法缩短这个时间。

此代码仅适用于 h1 至 h3，但您明白了。

var prevObj;
var h1 = 0;
var h2 = 0;
var h3 = 0;

var buildNavigation = function(containerSel) {

var thiz = this;
this.container = $(containerSel);
this.allHeadings = $(container).find('h1, h2, h3, h4, h5, h6');
this.obj = {};
this.obj['level'] = [];

this.allHeadings.each(function(i) {
    myLoop(this, i);
});

return this.obj;
}

var myLoop = function(element, index) {
var thiz = this;
this.ele = element;
this.index = index;

if($(this.ele).is('h1')) {
    var innerObject = {
        label: $(ele).text()
    }
    thiz.obj['level'].push(innerObject);


    prevObj = thiz.obj['level'][h1];
    h1++;

} else if($(ele).is('h2')) {
    if(prevObj.level) {

    } else {
        prevObj['level'] = [];
    }

    prevObj.level.push({
        label: $(ele).text()
    });

    prevObj2 = prevObj['level'][h2];
    h2++;

} else if($(ele).is('h3')) {
    if(prevObj2.level) {

    } else {
        prevObj2['level'] = [];
    }

    prevObj2.level.push({
        label: $(ele).text()
    });

    prevObj3 = prevObj2['level'][h3];
    h3++;

}
}
$(document).ready(function() {
  buildNavigation('#relevantHeadings');
}

【讨论】：