jQuery字母索引

Question

我是jQuery的新手,所以请原谅...我有一个页面,在无序列表中有很长的超链接列表:

<div class="longlist">
<ul>
<li><a href="/firstitem.aspx" title="First Item">First Item</a></li>
<li><a href="/seconditem.aspx" title="Second Item">Second Item</a></li>
...
<li><a href="/lastitem.aspx" title="Last Item">Last Item</a></li>
</ul>
</div>

在此页面的顶部是字母表字母的超链接列表

<div class="alphabet">
<a href="#" title="A">A</a>
<a href="#" title="B">B</a>
<a href="#" title="C">C</a>
...
<a href="#" title="Z">Z</a>
<a href="#" title="All">ALL</a>
</div>

当用户单击字母索引中的任何链接时,我只需要在长列表中显示以所选字母开头的项目.如果长列表中没有与该字母匹配的项目,那么我还需要"灰显"字母链接(这样用户就不会费心点击不存在的索引).

我怎么能用jQuery做到这一点？

Answer 1

$(document).ready(function(){.

    $(".alphabet a").each(function(i){
        if ($(".longlist ul li a[title^="+$(this).text()+"]").length < 1){
            $(this).hide();
        }
    });

    $(".alphabet a").click(function(){
        var letter = $(this).text();
        if (letter == 'ALL'){
            $(".longlist ul li").show();
            return;
        }

        $(".longlist ul li").hide();
        $(".longlist ul li a[title^="+letter+"]").parent().show();

    });     
});

似乎为我工作:)