Question

在网站上，我想将主导航显示为无序列表。在3个项目之后，我想关闭该列表并打开一个新项目，所以最终看起来像这样：

<div id="navigation">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

使用jQuery + Ajax动态生成导航。这就是我正在使用的代码：

$.getJSON("load.php", 
{
     some: value
},   
function(data)
{         
    $.each(data.items, function(i, item)
    {
        $('#navigation').find('ul').append('<li>' + i + '</li>');

        if(i % 3 == 0)
        {
            $('#navigation').find('ul').append('</ul><ul>');
        }
    });
});

不幸的是，浏览器没有解释这一点，并将结束ul标记视为第一个ul的嵌套对象。我该如何解决这个问题？

Answer 1

一种解决方案可能是首先在字符串中构造整个html（未经测试）：

$.getJSON("load.php", 
{
     some: value
},   
function(data)
{         
    var str="<ul>";
    $.each(data.items, function(i, item)
    {
        str+='<li>' + i + '</li>';

        if(i % 3 == 0)
        {
            str+='</ul><ul>';
        }
    });
    str+="</ul>";
    $('#navigation').html(str);
});

Answer 2

试试这个：

$.getJSON("load.php", 
{
     some: value
},   
function(data)
{   
    var curr = $('#navigation').find('ul');

    $.each(data.items, function(i, item)
    {
        curr.append('<li>' + i + '</li>');

        if(i % 3 == 0)
        {
            curr = curr.after('<ul>');
        }
    });
});

它还“缓存”当前的ul以获得更快的速度。

关闭无序列表

2 个答案: