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

Question

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

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

(по нажатию слова «груши») скрыть все элементы с классом = "яблока «

(щелкать слово„яблоки“) скрыть все элементы с классом =» груша»

(на кнопку„показать все“) показать все

Я полагаю, что было бы, как действительно упрощена версия «как вы печатаете».

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

Answer 1

хмм .. если у вас есть список, как следующее:

<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(); 

следующие бы скрыть все элементы с классом = «„яблоко“» :

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

или вы могли бы пойти с скрывая все, что не имеет «класс =„грушу“»:

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

Answer 2

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

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

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

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

и вы сделали;)

Answer 3

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

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

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

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

[Thi s также то, что Джоэл Поттер написал в своем комментарии к this answer.]

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

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

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