[jQuery] Modify nested, un-ordered list
I have a nested, un-ordered list, representing a table-of-contents,
that I want to modify. Specifically, increase or decrease the indent
level of an entry.
I have tried to use the family of functions append, prepend, before,
after and warp, but I am not successful yet, and I hope the group can
show me an efficient and practical way to get this done using jQuery.
For example, take this list:
<ul>
<li>Entry One</li>
<li>Entry Two
<ul>
<li>Entry Three</li>
<li>Entry Four</li>
<li id='editing'>Entry Five
<ul>
<li>Entry Six</li>
<li>Entry Seven</li>
</ul>
</li>
</ul>
</li>
<li>Entry Eight</li>
<li>Entry Nine</li>
</ul>
I've identified the entry that needs to be modified with id='editing'
I want to decrease its indent by one level, along with its children -
producing a list like this:
<ul>
<li>Entry One</li>
<li>Entry Two
<ul>
<li>Entry Three</li>
<li>Entry Four</li>
</ul>
</li>
<li id='editing'>Entry Five
<ul>
<li>Entry Six</li>
<li>Entry Seven</li>
</ul>
</li>
<li>Entry Eight</li>
<li>Entry Nine</li>
</ul>
How can I do this?