jQuery：通过类过滤掉元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/879902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: filter out elements via class?
提问by dbf
I have a website featuring a long list of names. To make it more oversee-able, I'd like to put a text link in to
我有一个网站，列出了一长串名字。为了使其更易于监督，我想将文本链接放入
(on load) show all
（加载时）显示全部
(on clicking word "pears") hide all elements with class="apple"
（点击单词“梨”）隐藏所有带有 class="apple" 的元素
(on clicking word "apples") hide all elements with class="pear"
（点击单词“apples”）隐藏 class="pear" 的所有元素
(on clicking "show all") show all
（点击“显示全部”）显示全部
I suppose it'd be like a really simplified version of "as you type" filtering.
我想这就像一个真正简化的“当你输入”过滤的版本。
Does a plug-in exist for this? I don't even know where to start!
是否存在用于此的插件？我什至不知道从哪里开始！
回答by gehsekky
hmm.. if you had a list like the following:
嗯..如果你有一个如下列表：
<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>
the following would show all:
以下将显示所有内容：
$("span.*").show();
the following would hide all elements with 'class="apple"':
以下将隐藏所有带有 'class="apple"' 的元素：
$("span[class='apple']").hide();
or you could go with hiding everything that doesn't have 'class="pear"':
或者你可以隐藏所有没有 'class="pear"' 的东西：
$("span[class!='pear']").hide();
回答by dbf
Just bumped into this post, I know it's old but to be honest are none of the given answers pretty helpful. In my opinion, you can filter out the elements using the filter with :not, as in filter(':not()').
刚碰到这篇文章，我知道它很旧，但说实话，给出的答案都没有帮助。在我看来，您可以使用带有:not的过滤器过滤掉元素，如filter(':not()').
As Joel Potterstated, using $("span[class='apple']").hide();will only select the spans with exactly one classname, apple. If multiple classes are present (which is highly likely) then such an approach would not work.
正如Joel Potter所说， using$("span[class='apple']").hide();只会选择只有一个类名apple的跨度。如果存在多个类（这很有可能），那么这种方法将不起作用。
If you click on a word, e.g. pears, you can then filter out the elements that do notcontain the class pears.
如果单击某个词，例如pears，则可以过滤掉不包含 class的元素pears。
$('span').show().filter(':not(.pears)').hide();
and you're done ;)
你就完成了;)
回答by Oliver
To filter out elements that contain a given class or any other attribute value, using the Attribute Contains Word Selectorwould be a good solution:
要过滤掉包含给定类或任何其他属性值的元素，使用Attribute Contains Word Selector将是一个很好的解决方案：
$("span").filter("[class~='apple']")
Actually, for the class attribute, it's even easier to just write:
实际上，对于 class 属性，只需编写以下代码就更容易了：
$("span").filter(".apple") // or:
$("span.apple")
[This is also what Joel Potter wrote in his comment to this answer.]
[这也是乔尔波特在他对这个答案的评论中所写的内容。]
That way you'll be able to match all of the below:
这样，您将能够匹配以下所有内容：
<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>
So whenever you're not 100% sure that you'll only have a single class set on an element, use the ~=operator.
因此，只要您不是 100% 确定您只会在元素上设置一个类，请使用~=运算符。
