使用 display:block 选择元素

Posted 2023-03-05

【中文标题】使用 display:block 选择元素

【英文标题】：select elements using display:block

【发布时间】：2013-01-02 03:14:32

【问题描述】：

这是我想使用 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>

【问题讨论】：

你累了吗$('#report').css('display') == 'block';？

使用一个类设置display: block，然后按该类选择。

【参考方案1】：

也许你可以使用这个 jQuery ：

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

还是这个:)？

$("#report div:visible");

【讨论】：

小心，如果元素在不可见选项卡或其他东西中，最好手动检查css样式，因为“可见”不会选择那些元素

【参考方案2】：

$("#report > :visible") 

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

【讨论】：

我认为 > 的子选择现在已被 .children() 弃用。还是取消了弃用？

我在文档 (api.jquery.com/child-selector) 中没有看到任何提及。

如果弃用仍然有效，那么它必须被埋在文档的其他部分，而不是它应该在的地方。

我的错，particular use 的 > 已被弃用，现在文档中没有提及。你的代码很好，虽然我想我会使用$("#report").children("div").is(":visible")。

【参考方案3】：

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

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

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

【讨论】：

我不会使用它，因为你不能确定它是 display:block 也可能是 display: block

【参考方案4】：

你可以使用：

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

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

【讨论】：

只有在将display: block; 直接设置为元素时才有效。并且仅当设置了 display: block; 时？

是的。另外，只有在有空格的情况下，才不确定 JS 是否规范化。这是一个糟糕的方法，一个类会更好。

如果您基于样式属性进行操作，我将使用包含选择器 (*=) 这将使上述语法变为 $("[style*='display: block;']")，同样如前所述，您必须考虑冒号: 后面的空格，还要注意我跳过了结尾的分号;

【参考方案5】：

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

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

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

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

【讨论】：

即使你不能用 CSS 来做，你也可以用 jQuery 选择器来做。

我想我对这个问题的解释不同。鉴于标题询问选择在何处应用display: block，我认为问题更倾向于基于属性而不是可见性进行选择。如果他有一个可见的元素，而 display: block 未应用（可能是另一个 display 值，或者根本没有），我假设他不想选择这个。确实，jQuery 的 :visible 会起作用如果目标是可见元素而不是按该特定值进行选择。

【参考方案6】：

为什么不直接

$('#report div:visible');

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

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

【讨论】：

你的答案和接受的答案有什么不同？！

【参考方案7】：

这应该可行：

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

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

【参考方案8】：

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

【参考方案9】：

我喜欢jjj 的答案，即在选择器中使用:visible。但是，如果你真的需要使用 style 属性，我会使用下面的选择器

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

请注意

我使用了包含运算符 (*=)，以防其他样式也存在。 我省略了结尾分号;，以防样式属性没有它。 最后，我使用了两个选择器，用逗号分隔,，区别在于冒号后面的空格:。

话虽如此，如果您知道style 属性中写入的确切样式语法，对于有问题的property（在本例中为display），您可以简单地将其与包含*= 或甚至完全匹配=。

更多信息请访问W3School CSS Attribute Selectors