jQuery：通过类过滤掉元素？

我有一个网站，里面有很多名字。 为了使其更具监督性，我想在其中添加文本链接

（在加载时）显示所有

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

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

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

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

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

Answer 1

嗯..如果你有一个如下列表：

red apple green apple big pear little pear 

以下将显示所有：

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

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

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

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

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

Answer 2

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

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

如果单击单词，例如梨 ，则可以过滤掉不包含类pears的元素。

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

你完成了;）

Answer 3

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

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

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

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

[这也是乔尔波特在对这个答案的评论中写的。]

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

 ... ... ... 

因此，每当您不能100％确定您只在元素上设置单个类时，请使用~=运算符。