使用display：block选择元素

这是html内容，我想从中选择报表中的所有元素，使用jQuery $("#report:visible")显示块对我来说不起作用。

Answer 1

也许你可以使用这个jQuery：

 $("#report div:visible").each(function() { console.log($(this).attr('id')); }); 

还是这一个:)？

 $("#report div:visible"); 

Answer 2

 $("#report > :visible") 

这将选择#report的直接子#report 。 没有空间，如果可见，则选择#report本身。 （没有>它的目标也是输入。）

Answer 3

你可以使用：

 $("[style='display: block;']"); 

但我不会，我也会添加一个类来挂钩。

Answer 4

您不能使用属性值本身直接在CSS中选择元素。 但是，您可以按class级选择。 最好的解决方案是使用类来分配display: block （例如visible类），然后根据其存在与否来进行选择。

另一种方法是使用style元素的整个值进行选择。 但问题是，如果添加其他内联样式，选择器将不再起作用。 然后你可以进入正则表达式解析样式属性，但在我看来应用一个visible或hidden类更容易，并将表现得更好。

请注意，使用visible或hidden类的另一个好处是，您可以非常轻松地使用JavaScript打开和关闭它：

 document.getElementById("id").classList.toggle("hidden"); 

Answer 5

这可以帮助您使用多个选择器CSS选择器 。

至于您的要求，您可以使用它来选择#report下的display:block所有div 。

 $('#report div[style*=display:block]') 

Answer 6

为什么不呢

 $('#report div:visible'); 

如果标记保持这样，它将起作用。 如果不只是在“条目”等报告条目中添加一个类，那么就这样做

 $('#report .entry:visible'); 

Answer 7

这应该工作：

 $("#report *").filter(function(){ $(this).css("display") === "block"; }); 

*选择#report中的所有元素。 然后，您将它们过滤到CSS属性设置为阻止的那些。

Answer 8

使用:visible代替[style*="display:block"] :visible ，因为它适用于包括IE在内的所有浏览器。 [style*="display:block"]在IE中不起作用。