使用显示选择的元素：块(select elements using display:block)

这是我要选择使用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>

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选择器 。

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

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

Answer 6:

为什么不

$('#report div:visible');

如果标记保持像它会成功。 如果不只是添加一个类像“进入”然后做报告条目

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

Answer 7:

这应该工作：

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

的*选择＃报告中的所有元素。 你然后将它们过滤到那些设置为阻止CSS属性。

Answer 8:

用途:visible代替[style*="display:block"]因为它会在所有的浏览器包括IE工作。 [style*="display:block"]将不会工作在IE。

文章来源: select elements using display:block