4

这是 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>
4

9 回答 9

19

也许你可以使用这段 jQuery ：

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

还是这个:)？

$("#report div:visible");
于 2013-01-18T12:10:30.703 回答
4 
$("#report > :visible")

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

于 2013-01-18T11:59:04.727 回答
2

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

至于您的要求，您可以使用div它display:block在#report.

$('#report div[style*=display:block]')
于 2013-01-18T12:02:01.347 回答
1

你可以使用：

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

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

于 2013-01-18T11:58:24.447 回答
1

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

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

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

document.getElementById("id").classList.toggle("hidden");
于 2013-01-18T11:59:46.827 回答
0

为什么不只是

$('#report div:visible');

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

$('#report .entry:visible');
于 2013-01-18T12:10:50.810 回答
0

这应该有效：

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

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

于 2014-01-24T10:03:51.970 回答
0

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

于 2015-04-24T09:46:07.733 回答
0

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

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

请注意

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

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

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

于 2021-10-27T17:06:50.237 回答