Алфавитный указатель 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();

    });     
});

Кажется, работает для меня:)

Answer 2

$('myLetterList a').click(function(){
    var letter = $(this).attr('title');
    $('ul li').each(function(){
        var t = $(this).attr('title');
        if(letter != t.substring(0,1)){
            $(this).hide();
        }
    });
});

Я уверен, что есть более jQuery-иш способ сделать это (особенно бит .each ()), но это должно приблизить вас к тому месту, где вы хотите быть.