使用 jQuery，你如何只找到可见元素而留下隐藏元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16782925/
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
Using jQuery, how do you find only visible elements and leave hidden elements alone?
提问by o_O
So I start with items 1-4:
所以我从第 1-4 项开始：
<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>
Then I have some input checkboxes:
然后我有一些输入复选框：
<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />
So basically I have jQuery showing and hiding divs. Now I have another function that must iterate through these divs (one for each checkbox), and show/hide based on another criteria. But I don't want the already hidden divs to be shown again.
所以基本上我有 jQuery 显示和隐藏 div。现在我有另一个函数必须遍历这些 div（每个复选框一个），并根据另一个标准显示/隐藏。但我不想再次显示已经隐藏的 div。
$(".someDiv").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
};
In this example, the only remaining div should be the last div. Unfortunately, this code will make the second and fourth divs shown.
在这个例子中，唯一剩下的 div 应该是最后一个 div。不幸的是，此代码将显示第二个和第四个 div。
This code is very basic example of all the filters I'm going to be applying, adding etc.
这段代码是我将要应用、添加等的所有过滤器的非常基本的例子。
回答by Reactgular
You can use the :visibleselector to find only visible.
您可以使用:visible选择器来查找仅可见的。
$(".someDiv:visible").each(....);
You can use the .not()selector to find only hidden.
您可以使用.not()选择器只查找隐藏的。
$(".someDiv").not(":visible").each(....);
I think you can perform the same operation in your code with this one line.
我认为您可以使用这一行在代码中执行相同的操作。
$(".someDiv").hide().find(".regular").show();
Find all .someDivand hide them, then find those with a .regularclass and show them.
找到所有.someDiv并隐藏它们，然后找到具有.regular类的那些并显示它们。
回答by PSL
You could use :visibleselector to select the .someDivthat are visible.
您可以使用:visible选择器来选择.someDiv可见的。
$(".someDiv:visible").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
}
});
Here is another funny way utilizing the chaining :) and making it single line.
这是使用链接 :) 并使其成为单行的另一种有趣方式。
$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
回答by Niche
You could do this two ways: You could add another class for the display: noneelements and make them invisible via css, or you could find out the css property via jquery
您可以通过两种方式执行此操作：您可以为display: none元素添加另一个类并通过 css 使它们不可见，或者您可以通过 jquery 找出 css 属性
via css class
通过 css 类
html
html
<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>
css
css
.someDiv{
display: block;
}
.hidden{
display: none;
}
js
js
$(".someDiv").each(function(){
if($(this).hasClass("hidden")){
$(this).show();
} else {
$(this).hide();
};
via jquery
通过jQuery
$(".someDiv:visible").each(function(){
if($(this).hasClass("regular")){
$(this).show();
} else {
$(this).hide();
}
});
回答by Ja?ck
You can use the :not()selector for that and filter the results before going into the .each():
您可以使用:not()选择器并在进入之前过滤结果.each()：
$(".someDiv:not(:hidden)").each(function(){
