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.

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

你完成了;)

Answer 3

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

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

实际上,对于class属性,它更容易编写:

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

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

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

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

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