忽略外部元素的可见性,并在jQuery选择器中选择第一个可见的子元素

Question

HTML:

<div class="outer">
  <div id="inner1" class="inner" style="display: none"></div>
  <div id="inner2" class="inner"></div>
  <div id="inner3" class="inner"></div>
</div>

JavaScript(小提琴):

var $first_visible = $("div.inner:visible:first");

这将返回第一个可见的内部div,即inner2.

但是,只要隐藏了外部div(假设我想稍后将其淡入):

<div class="outer" style="display: none">
  <div id="inner1" class="inner" style="display: none"></div>
  <div id="inner2" class="inner"></div>
  <div id="inner3" class="inner"></div>
</div>

所有内部div都被认为是隐藏的,选择器不再返回inner2.

我如何修改我的jQuery选择器以忽略容器的可见性？

Answer 1

一种选择是显示父元素，检查第一个可见元素，然后再次隐藏父元素。

或者，由于元素具有内联 CSS，您可以根据属性是否display设置为 来过滤元素none，然后检索过滤集合中的第一个元素：

更新的示例

var $first_visible = $(".inner").filter(function () {
  return this.style.display !== 'none';
}).first();

var $first_visible = $(".inner").filter(function () {
  return this.style.display !== 'none';
}).first();

var $first_visible = $(".inner").filter(function () {
  return this.style.display !== 'none';
}).first();

$("div#result").text('First visible: #' + $first_visible[0].id);

然而，更好的方法是使用.getComputedStyle()方法检查元素的计算样式。这样做时，您可以确定display元素的 是否设置为，none即使该元素没有内联 CSS。

更新的示例

var $first_visible = $(".inner").filter(function () {
  return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none;">
  <div id="inner1" class="inner" style="display: none"></div>
  <div id="inner2" class="inner"></div>
  <div id="inner3" class="inner"></div>
</div>

<div id="result"></div>

var $first_visible = $(".inner").filter(function () {
  return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();

var $first_visible = $(".inner").filter(function () {
  return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();

$("div#result").text('First visible: #' + $first_visible[0].id);