[SOLVED]Manipulation of a navigation
Hello everybody,
I am currently creeating a navigation, am am a bit stuck with the navigation.
So here's the html I have:
-
<ul>
<li class="selected">
<a href="#">about us</a>
<div class="submenu">
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
<li><a href="#">1.4</a></li>
<li><a href="#">1.5</a></li>
<li><a href="#">1.6</a></li>
</ul>
</div>
</li>
</ul>
And here is how it should look after manipulation:
-
<ul>
<li class="selected">
<a href="#">about us</a>
<div class="submenu">
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
</ul>
<ul>
<li><a href="#">1.4</a></li>
<li><a href="#">1.5</a></li>
<li><a href="#">1.6</a></li>
</ul>
</div>
</li>
</ul>
So there should be a new <ul> after every third list element in the submenu.
Here's my js code so far, but it does not work as expected:
-
var ch=$(this).find("div.submenu > ul").children().length;
for( var j=0; j<ch; j++){
if (j % 3 == 0){
$(this).find("div.submenu > ul > li").eq(j).after("</ul><ul>");
}
}
Hope somebody can help, I'm really stuck with this.