-1

尝试使用 jQuery 获得正确的标记/嵌套。

我有一个 json 提要，我用它来制作 megamenu。我试图复制的示例布局。

<ul>
   <li class="top-level"><a href="">Home</a></li>
   <li class="top-level"><a href="">Find your holiday</a>
        <ul class="heading">
            <li class="heading"><a href="">Destinations</a></li>
            <li class="heading"><a href="">Latest ski deals</a></li>
            <li class="heading"><a href="">Where to stay</a></li>
        </ul>
   </li>
</ul>

来自 JSON 的片段

{
    "navigation": [
            {
                    "title": "Home",
                    "link": ""
 },
            {
                    "title": "Find your ski holiday",
                    "link": "#URLhere",
                    "headingArray": [
                            {
                                    "heading": [
                                            {
                                                    "title": "Destinations",
                                                    "link": "#URLhere",
                                                    "subheading": [
                                                            {
                                                                    "title": "Andorra",
                                                                    "link": "#URLhere"
},
                                                            {
                                                                    "title": "Austria",
                                                                    "link": "#URLhere"
},

这是我一直在研究的 jsfiddle http://jsfiddle.net/imshuffling/wC9VG/7/

我在使用正确嵌套的 html 中包装 jquery 时遇到问题，任何帮助都会很棒。

更新 抱歉，如果我之前不清楚。我的项目以正确的顺序出现，任何人都可以帮助包装元素，但仍然遇到一些问题。

 <li class="top-level"><a href="">Find your holiday</a>
        <ul class="heading">
            <li class="heading"><a href="">Destinations</a></li>
            <li class="heading"><a href="">Latest ski deals</a></li>
            <li class="heading"><a href="">Where to stay</a></li>
        </ul>
   </li>

更新http://jsfiddle.net/imshuffling/wC9VG/12/

4

1 回答 1

0

我不喜欢你迭代对象/数组的方式，大量使用 $.each。但是根据您的要求，修改了输出所需 html 的代码。只需添加必要的<ul>标签并将整个内容更改为字符串连接以获得性能和东西..

http://jsfiddle.net/wC9VG/13/

$(function () {
    var nav = $('#nav'),
        html = '';

    $.each(json.navigation, function (idx, obj) {
        console.log(obj);

        if (this.headingArray) {
            $.each(this.headingArray, function () {
                html+='<ul class="heading">';
                $.each(this.heading, function () {
                    html+='<li class="heading"><a href="' + this.link + '">' + this.title + '</a></li>';

                    $.each(this.subheading, function () {
                        html+='<li class="subheading"><a href="' + this.link + '">' + this.title + '</a></li>';
                    });
                });
                html+='</ul>';
            });
        } else {
            html += '<li class="top-level"><a href="' + obj.link + '">' + obj.title + '</a></li>';
        }

    });

    nav.html(html);
});
于 2013-05-02T10:17:52.417 回答