Keyboard selecting nested li's with jquery
- by Joel
I have a load of nested <ul>'s and <li>'s and I would like to be able to have a hover / selected class on an <li>, and use the keyboard up and down buttons to select up and down on the <li>s.. however they are nested and need to jump across <ul>s if necessary.
For instance:
<ul>
<li class='cat'>
cat 1
<ul>
<li class='hover'>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li class='cat'>
cat 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
</ul>
<ul class='subcat'>
<li class='cat'>
Cat 3
<ul>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
</ul>
</li>
</ul>
</li>
<li class='cat'>
cat 4
<ul>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
</ul>
</li>
</ul>
As I press the down key I wish the items to be selected in numerical order (they do not have numerical order IDs and sometimes some of them are hidden so they should be ignored. But it needs to go to the next <li> that isn't a category and set that as hover.
