закрытие неупорядоченного списка

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 для большей скорости.