Фильтрация контента (jQuery)

Question

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>

Например, щелкнув ссылку «категория 1», вы должны скрыть все остальные элементы категории из списка.

Я понимаю, что можно использовать селектор .filter () в jQuery, но я не уверен, как реализовать его для моих целей.

Спасибо за вашу помощь!

Answer 1

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

  event.preventDefault();
});

Answer 2

В основном вы будете делать что-то вроде этого: $('.items li').hide(); $('.category-1').show();

Первый, чтобы скрыть все остальные пункты меню, последний, чтобы показать выбранные :) Вы можете просто поместить его в onclick тега <a>.