1

次のような 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私の実際のコードは、より多くの属性とより多くのディメンション/レベルを備えた、はるかに複雑です。

これまでにかなりの数の試行を開始しましたが、サブ配列を配列の1つの項目に適切にプッシュする方法がわかりません:

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']
    }

});
4

2 に答える 2

0

はい、分かりました。これは最も醜いコードであり、私より賢い人が少し時間があれば、それを片付けて回答として投稿して、受け入れることができるようにしてください. これをもっと短くする方法があると確信しています。

h1このコードはto専用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');
}
于 2013-08-05T20:21:26.987 に答える