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

Question

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

(под нагрузкой) показать все

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

хм .. если бы у вас был список, подобный следующему:

<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 = "pear"':

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

Answer 3

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

$("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%, что для элемента будет установлен только один класс, используйте оператор ~=.