jQuery：通过类过滤掉元素？

Question

我的网站上有很多名字。 为了使其更具监督性，我想将文本链接放入

（加载时）显示所有

（点击单词“pears”）隐藏所有带有class =“apple”的元素

（点击单词“apples”）隐藏所有带有class =“pear”的元素

（点击“全部显示”）显示全部

我认为它就像是“当你输入”过滤的真正简化版本。

是否存在插件？我甚至不知道从哪里开始！

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

以下内容将使用'class =“apple”'隐藏所有元素：

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

或者你可以隐藏所有没有'class =“pear”'的东西：

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

Answer 2

刚刚碰到这篇文章，我知道它已经老了，但老实说，没有一个给定的答案非常有帮助。在我看来，您可以使用带有：not 的过滤器过滤掉元素，就像在filter(':not()')中一样。

正如 Joel Potter 所述，使用$("span[class='apple']").hide();只会选择只有一个类名的跨度， apple 。如果存在多个类（很有可能），那么这种方法将无效。

如果您点击某个字词，例如 pears ，然后您可以过滤掉不包含类pears的元素。

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

你完成了;）

Answer 3

要过滤掉包含给定类或任何其他属性值的元素，使用Attribute Contains Word Selector将是一个很好的解决方案：

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

实际上，对于class属性，它更容易编写：

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

[这也是Joel Potter在对this answer的评论中所写的内容。]

这样你就可以匹配以下所有内容：

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

因此，只要您不是100％确定您只在元素上设置了一个类，请使用~=运算符。