JQuery: фильтровать элементы через класс?

У меня есть веб-сайт с длинным списком имен. Чтобы сделать его более контролируемым, я хотел бы поместить текстовую ссылку в

(при загрузке) показать все

(при нажатии на слово "груши" ) скрыть все элементы с помощью class= "apple"

(при нажатии на слово "яблоки" ) скрыть все элементы с помощью class= "pear"

(при нажатии "показать все" ) показать все

Я предполагаю, что это будет как действительно упрощенная версия фильтрации "по мере ввода".

Существует ли для этого плагин? Я даже не знаю, с чего начать!

Ответ 1

hmm.. если у вас есть список вроде следующего:

<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>

показано следующее:

$("span.*").show();

следующее будет скрывать все элементы с помощью < class= "apple" ':

$("span[class='apple']").hide();

или вы можете скрывать все, что не имеет "class=" груша ":

$("span[class!='pear']").hide();

Ответ 2

Просто наткнулся на этот пост, я знаю, что он старый, но, честно говоря, ни один из этих ответов не очень полезен. На мой взгляд, вы можете фильтровать элементы с помощью фильтра с помощью: not, как в filter(':not()').

Как заявил Джоэл Поттер, используя $("span[class='apple']").hide();, выберете только те части с одним именем класса, apple. Если несколько классов присутствуют (что весьма вероятно), то такой подход не будет работать.

Если вы нажмете на слово, например. груши, вы можете затем отфильтровать элементы, которые не содержат класс pears.

$('span').show().filter(':not(.pears)').hide();

и все готово;)

Ответ 3

Чтобы отфильтровать элементы, содержащие данный класс или любое другое значение атрибута, использование Attribute Contains Word Selector будет хорошим решением:

$("span").filter("[class~='apple']")

Собственно, для атрибута класса еще проще просто написать:

$("span").filter(".apple") // or:
$("span.apple")

[Это также то, что Джоэл Поттер написал в своем комментарии к этому ответу.]

Таким образом, вы сможете сопоставить все ниже:

<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>

Поэтому всякий раз, когда вы не на 100% уверены, что у вас будет только один набор классов для элемента, используйте оператор ~=.