jquery - 查找隐藏父级中可见的子级

Question

有没有办法使用 jQuery 来获取“隐藏”容器中包含的所有“可见”元素，而不使容器本身可见？

例如...

<div id="container" style="display:none">
  <div>Visible</div>
  <div style="display:none">Hidden</div>
  <div>Another Visible</div>
  <div style="display:none">Another Hidden</div>
</div>

理想情况下，我希望能够做到...

$("#container div:visible")  or  $("#container div").filter(":visible")

..他们会返回第一个和第三个<div> children 。

但是，因为#container本身是隐藏的，它不会返回任何内容。

如果不创建#container，这可能吗？可见？

Answer 1

根据display样式属性值进行过滤。

var $visible = $("#container div").filter(function() {
  return this.style.display !== 'none'
});

// or get style value using jQuery css() method
var $visible1 = $("#container div").filter(function() {
  return $(this).css('display') !== 'none'
});

console.log($visible.text())
console.log($visible1.text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="display:none">
  <div>Visible</div>
  <div style="display:none">Hidden</div>
  <div>Another Visible</div>
  <div style="display:none">Another Hidden</div>
</div>

---

更新:如果显示属性是通过内联样式设置的，那么您可以使用 attribute contains selector (不是一个完美的方法，但在这种情况下它会起作用)。

var $visible = $('#container div:not([style*="display:none"])');

console.log($visible.text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="display:none">
  <div>Visible</div>
  <div style="display:none">Hidden</div>
  <div>Another Visible</div>
  <div style="display:none">Another Hidden</div>
</div>