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")

..他们将返回第1和第3个<div>孩子。

但是，因为#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>

Answer 2

您的具体示例的另一个选项是使用:not()选择器。

var els = $("#container div").filter(":not([style='display:none'])");

console.log(els.length)

<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>

Answer 3

使用style属性和jquery not selector

$('#container :not([style="display:none"])')

在隐藏的父级中查找可见的子级

3 个答案: