Sorting and Hiding list elements
Let's say I have two lists for menus and one list for sortable content.
<ul id="type">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ul id="location">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="content">
<li class="A 1"></li>
<li class="A 2"></li>
<li class="B 2"></li>
<li class="D 4"></li>
</ul>
If I click on "A" in the #type list, the content list is sorted, the li's with the classes "B" and "D" are hidden by attaching a class of .hidden to display:none. In turn becoming:
<ul id="content">
<li class="A 1"></li>
<li class="A 2"></li>
<li class="B 2 hidden"></li>
<li class="D 4 hidden"></li>
</ul>
My question is, how do I apply the new content results to the #location menu? If "B" and "D" are hidden then numbers "3" and "4" shouldn't be displayed. I'm having trouble getting the two to talk to each other. I've tried .is(':visible"), .each(), etc. and can't quite crack it. Thanks in advance for your help.