jQuery的字母索引

我是很新，jQuery的，所以請原諒...... 我有一個網頁的超鏈接的無序列表一個長長的清單：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來做到這一點？

來源

2009-06-23 Alfero Chingono

要求是隱藏鏈接的其餘部分，只顯示只有那些選擇。 – 2009-06-23 16:00:42

$(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(); 

    });  
});

似乎爲我工作:)

來源

2009-06-23 16:07:34 mheap

$('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的上下的方式做到這一點（特別是。每個（）位），但應該讓你接近，你想要的。

來源

2009-06-23 16:01:15 inkedmn

我想我在這裏得到你在做什麼。我可能必須先顯示所有項目，然後隱藏那些不匹配的項目......或者反過來呢？ – 2009-06-23 16:05:52

正確 - 該代碼假定所有項目都是可見的，並將隱藏不以點擊字母開頭的項目。您可能還想添加另一個顯示所有內容的位（如果這符合您的設計，當然）。 – inkedmn 2009-06-23 16:07:02

jQuery的字母索引

回答

相關問題