jQuery 使用 display:block 选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14398444/
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
select elements using display:block
提问by Abhishek
This is the html content from which I want to select all elements inside report having display block using jQuery
$("#report:visible")does not work for me.
这是我想从中选择所有具有使用 jQuery 显示块的报告中的元素的 html 内容
$("#report:visible")对我不起作用。
<div id="report">
<div id="p1" style="display: block;">
<input id="pname1" type="checkbox" name="report1">
<input id="pname2" type="checkbox" name="report2">
</div>
<div id="p2" style="display: none;">
<input id="pname1" type="checkbox" name="report1">
<input id="pname2" type="checkbox" name="report2">
</div>
<div id="p3" style="display: none;">
<input id="pname1" type="checkbox" name="report1">
<input id="pname2" type="checkbox" name="report2">
</div>
<div id="p4" style="display: block;">
<input id="pname3" type="checkbox" name="report1">
<input id="pname4" type="checkbox" name="report2">
</div>
</div>
回答by Benz
Maybe you can use this piece of jQuery :
也许你可以使用这段 jQuery ：
$("#report div:visible").each(function() {
console.log($(this).attr('id'));
});
Or this one :) ?
还是这个 :) ？
$("#report div:visible");
回答by JJJ
$("#report > :visible")
This will select the direct children of #reportthat are visible. Without the space you're selecting #reportitself if it's visible. (Without the >it'd target also the inputs.)
这将选择#report可见的直接子级。如果没有空间，您将选择#report自己，如果它是可见的。（如果没有>它，它也会针对输入。）
回答by Rich Bradshaw
You could use:
你可以使用：
$("[style='display: block;']");
but I wouldn't, I'd add a class as well to hook onto.
但我不会，我也会添加一个类来挂钩。
回答by Levi Botelho
You cannot directly select elements in CSS using a property value itself. You can however select by class. The best solution would be to use a class to assign display: block(such as a visibleclass) and then to select based on its presence or lack thereof.
您不能使用属性值本身直接选择 CSS 中的元素。但是，您可以按类别选择。最好的解决方案是使用一个类来分配display: block（例如一个visible类），然后根据它的存在或不存在进行选择。
The other way to do this is to select using the entire value of the styleelement. But the problem with this is that if you add other inline styles that selector will no longer work. You could then get into regex parsing the style attribute but in my opinion applying a visibleor hiddenclass is far easier and will perform significantly better.
另一种方法是使用style元素的整个值进行选择。但问题在于，如果您添加其他内联样式，则选择器将不再起作用。然后，您可以使用正则表达式来解析样式属性，但在我看来，应用 avisible或hidden类要容易得多，并且性能会明显更好。
Note that another advantage of using the visibleor hiddenclass is that you can turn it on and off with JavaScript very easily:
请注意，使用visibleorhidden类的另一个优点是您可以非常轻松地使用 JavaScript 打开和关闭它：
document.getElementById("id").classList.toggle("hidden");
回答by mbharanidharan88
This may help you with several selectors CSS Selectors.
这可以帮助您使用多个选择器CSS Selectors。
As for your requirement, You can use this to select all divwith display:blockunder the #report.
至于你的要求，你可以用它来选择所有div与display:block下#report。
$('#report div[style*=display:block]')
回答by ahmed.hoban
Why not just
为什么不只是
$('#report div:visible');
if markup stays like that it will work. If not just add a class to the report entries like 'entry' then do
如果标记保持这样，它将起作用。如果不只是向报告条目添加一个类，例如“条目”，那么请执行
$('#report .entry:visible');
回答by Chris Smith
This should work:
这应该有效：
$("#report *").filter(function(){
$(this).css("display") === "block";
});
The * selects all elements within the #report. You're then filtering them to those with CSS property set to block.
* 选择#report 中的所有元素。然后将它们过滤为 CSS 属性设置为阻止的那些。
回答by Youdhveer
Use :visiblein place of [style*="display:block"]as it will work in all browsers including IE. [style*="display:block"]will not work in IE.
使用:visible代替，[style*="display:block"]因为它适用于包括 IE 在内的所有浏览器。[style*="display:block"]不会在 IE 中工作。
