定位元素的基础上匹配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()。