过滤内容（jQuery） [英] Filtering content (jQuery)

问题描述

HTML：

 < div class =filter> 
< a href =＃category-1>类别1< / a> 
< a href =＃category-2>类别2< / a> 
< / div> 
< ul class =items> 
< li class =category-1> item 1< / li> 
< li class =category-1>第2项< / li> 
< li class =category-2> item 3< / li> 
< li class =category-2>第4项< / li> 
< / ul> 
  

我想要的是例如点击类别1链接应该隐藏所有其他类别的项目名单。

我了解jQuery的.filter（）选择器可以使用，但我不知道如何实现它在我的目的这里。

感谢您的帮助！

解决方案

  $（'div。 （'''，'click'，function（event）{
 $（'ul.items li'）。hide（）。filter（'。'+ this.href.slice（this .href.indexOf（＃）+ 1））。show（）; 
 
 event.preventDefault（）; 
}）; 
  

HTML:

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-2">item 3</li>
    <li class="category-2">item 4</li>
</ul>

What I want is for example clicking on 'category 1' link should hide all other category items from the list.

I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.

Thanks for your help!

解决方案

$('div.filter').delegate('a', 'click', function (event) {
  $('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();

  event.preventDefault();
});

这篇关于过滤内容（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！