rewrite markup as nested LI in order to use treeview

rewrite markup as nested LI in order to use treeview

Hi,

I have an application that produces a dynamic unordered list from DB categories table. The list is representing the hierarchy by adding a “..” (Double dot) in front of the list item name for each hierarchy level like so:

<ul id="categories">

                <li>Cat1</li>

                <li>..Cat1a</li>

                <li>..Cat1b</li>

                <li>..Cat1c</li>

                <li>Cat2</li>

                <li>..Cat2a</li>

                <li>..Cat2b</li>

                <li>..Cat2c</li>

                <li>....Cat2c1</li>

                <li>..Cat2d</li>

                <li>..Cat2e</li>

</ul>

 

Now I want to use Treeview plugin http://docs.jquery.com/Plugins/Treeview/treeview in order to create a treeview

My question is how can I use jquery to rewrite the list in the correct markup in order to use the treeview plugin.

(I assume it asks for 2 steps: 1. Rewrite the markup 2. Use the treeview plugin)

Like so:

<ul id="categories">

                <li>Cat1</li>

                <ul>

                                <li>Cat1a</li>

                                <li>Cat1b</li>

                                <li>Cat1c</li>

                </ul>

                <li>Cat2</li>

                <ul>

                                <li>Cat2a</li>

                                <li>Cat2b</li>

                                <li>Cat2c</li>

                                <ul>

                                                <li>Cat2c1</li>

                                </ul>

                                <li>Cat2d</li>

                                <li>Cat2e</li>

                </ul>    

</ul>

 

Any help will be highly appreciated.

Thanks,

Yehuda