定位元素的基礎上匹配ID和類

Question

很新的jQuery和想知道如果有人能幫助我有以下問題，以顯示/隱藏：

使用我已生成一個列表，這樣的Textpattern;

<li class="archive-month"><a href="#" id="May2011">May</a></li> 
<li class="May2011"><a rel="bookmark" href="http://***">Post Number One</a></li> 
<li class="May2011"><a rel="bookmark" href="http://***">Post Number Two</a></li> 
<li class="May2011"><a rel="bookmark" href="http://***">Post Number One</a></li>  
<li class="archive-month"><a href="#" id="April2011">April</a></li> 

ad infinitum。

我的問題是，我如何使用<a>標籤來顯示和隱藏與標籤ID匹配的類的列表項目？例如，點擊編號爲「May2011」的a，切換隱藏和顯示所有li與「May2011」匹配的類，以此類推。

在此先感謝您的幫助。

Answer 1

要提出一個替代的解決方案比@David's answer這應該更高效：

$('li.archive-month > a').live('click', function() 
{ 
    $(this).parent().nextUntil('.archive-month').toggle(); 
    return false; 
}); 

你甚至可以做到使用.delegate()代替.live()如果所有<li>份額一個共同的祖先好一點 - 也許是<ul>。

$('#some-common-ancestor').delegate('li.archive-month > a', 'click', function() 
{ 
    $(this).parent().nextUntil('.archive-month').toggle(); 
    return false; 
}); 

N.B.這根本不使用元素ID。相反，它依賴於與OP —中的內容一致的HTML結構，即當鏈接被點擊時應該切換的<li>是鏈接父節點的下一個兄弟節點，直到但不包括下一個帶有類的liarchive-month。

Answer 2

你可以嘗試：

$('a').click(
    function(){ 
     var elemClass = this.id; 
     $('li.' + elemClass).toggle(); 
     return false; // assuming you don't want to follow the link. 
    }); 

參考文獻：

• click()。
• toggle()。