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

您可以使用：

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

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

Answer 3

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

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

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

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

Answer 4

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

根据您的要求，您可以使用此选项在div下选择display:block的所有#report。

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

Answer 5

为什么不

$('#report div:visible');

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

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

Answer 6

这应该有效：

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

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

Answer 7

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

使用display：block选择元素

7 个答案: