jQuery alphabetic index
<p>I'm pretty new to jQuery, so please forgive...
I have a page with a long list of hyperlinks in an unordered list:</p>

<pre><code>&lt;div class="longlist"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="/firstitem.aspx" title="First Item"&gt;First Item&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/seconditem.aspx" title="Second Item"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
...
&lt;li&gt;&lt;a href="/lastitem.aspx" title="Last Item"&gt;Last Item&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>At the top of this page is a list of hyperlinks for the letters of the alphabet</p>

<pre><code>&lt;div class="alphabet"&gt;
&lt;a href="#" title="A"&gt;A&lt;/a&gt;
&lt;a href="#" title="B"&gt;B&lt;/a&gt;
&lt;a href="#" title="C"&gt;C&lt;/a&gt;
...
&lt;a href="#" title="Z"&gt;Z&lt;/a&gt;
&lt;a href="#" title="All"&gt;ALL&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>When a user clicks any of the links in the alphabetic index, I need to show only items in the long list that start with the selected letter. I also need to 'gray out' the alphabetic links if there is no item matching that letter in the long list (that way the user wont bother clicking an index that does not exist).</p>

<p>How can I do this using jQuery?</p>
