On a website, I want to display the main navigation as an unordered list. After 3 items I want to close that list and open a new one, so it eventually looks something like this:
<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>
The navigation is dynmically generated using jQuery + Ajax. This is what the code I'm using looks like:
$.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>');
}
});
});
Unfortunately, the browser doesn't interpret this right and treats the closing ul tag as a nested object of the first ul. How do I fix this?
