使用 display:block 选择元素

Question

这是我想从中选择所有元素的 html 内容，使用 jQuery $("#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>

Answer 1

也许你可以使用这个jQuery：

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

还是这一个:)？

$("#report div:visible");

Answer 2

$("#report > :visible") 

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

Answer 3

你可以使用：

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

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

Answer 4

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

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

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

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

Answer 5

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

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

$('#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中不起作用。

Answer 9

我喜欢jjj的答案，即在选择器中使用:visible 。 但是，如果您确实需要使用 style 属性，我将使用以下选择器

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

请注意

1. 我使用了包含运算符 (*=)，以防还存在任何其他样式。
2. 我省略了结尾的分号; 如果 style 属性是在没有它的情况下编写的。
3. 最后，我使用了两个选择器，用逗号分隔,区别在于冒号:后面的空格。

话虽如此，如果您知道style属性中编写的确切样式语法，对于有问题的property （在这种情况下是display ），您可以简单地将它与 contains *=甚至完全匹配= 。

有关更多信息，请访问W3School CSS 属性选择器