javascript - Make ul-li navigation dynamically -

javascript - Make ul-li navigation dynamically -

i have next html:

<div id="nav"> <ul> <li class="keyitem">keyitem 1</li> <li>item</li> <li>item</li> <li>item</li> <li class="keyitem">keyitem 2</li> <li>item</li> <li>item</li> <li class="keyitem"></li> <li>item</li> <li>item</li> </ul> </div>

but want create above following:

<div id="nav"> <ul> <li class="keyitem">one <ul> <li class="child_one">item</li> <li class="child_one">item</li> <li class="child_one">item</li> </ul> </li> <li class="keyitem">two <ul> <li class="child_two">item</li> <li class="child_two">item</li> </ul> </li> <li class="keyitem">three <ul> <li class="child_three">item</li> <li class="child_three">item</li> </ul> </li> </ul> </div>

not possible alter first snippet of code structure. have create first snippet sec snippet , replace first one.

please help.

thanks in advance..

var childclasses = ['child_one', 'child_two', 'child_three' /* more here */]; $('#nav li.keyitem').each(function(i) { var $li = $(this), $sub = $li.nextuntil('li.keyitem').addclass(childclasses[i]); $('<ul />').appendto($li).append($sub); });

will produce:

<div id="nav"> <ul> <li class="keyitem">keyitem 1 <ul> <li class="child_one">item</li> <li class="child_one">item</li> <li class="child_one">item</li> </ul> </li> <li class="keyitem">keyitem 2 <ul> <li class="child_two">item</li> <li class="child_two">item</li> </ul> </li> <li class="keyitem">keyitem 3 <ul> <li class="child_three">item</li> <li class="child_three">item</li> </ul> </li> </ul> </div>

(demo)

javascript jquery html