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

HTML:

这将返回第一个可见的内部div，即

inner2

但是，一旦外部div被隐藏（假设我想稍后淡入）：

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

inner2

---

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

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

或者，由于元素具有内联CSS，您可以根据

display

属性是否设置为

none

来过滤元素，然后检索过滤集合中的第一个元素：

var$first\u visible=$（“.inner”）.filter（函数（）{
返回this.style.display！=“无”；
}).first（）；
$（“div#result”）.text（'First visible:#'+$First#u visible[0].id）
正如阿德内奥所说，一旦它被隐藏，你就无能为力了

但是，您可以在手之前进行检查，显示它，如果它被隐藏，则再次隐藏它


var wasVisible=$（“.outer”）.is（':visible'）；
$（“.outer”）.show（）；
var$first_visible=$（“div.inner:visible:first”）；
如果（！wasVisible）{
$（“.outer”）.hide（）；
}
console.log（$first_visible.length）
编写两个类：第一个显示，最后一个隐藏。
这样，即使父项为“隐藏”，也可以选择所有“可见”的div


var$first\u visible=$（“div.inner.enable”）；
console.log（$first_可见）；
$（“div#result”）.text（$first_visible[0].id）
。禁用{
显示：无；
}
.启用{
显示：块；
}

1.
2.
3.
我的建议是使用过滤功能，但只选择第一个可见元素（但由于父元素被隐藏，因此该元素也被隐藏）：

var$first_visible=$（'div.inner'）.filter（函数（）{
返回！（this.style.visibility！=“this.style.display！”；
}).first（）；

$（函数（）{
var$first_visible=$（'div.inner'）.filter（函数（）{
返回！（this.style.visibility！=“this.style.display！”；
}).first（）；
$（'body'）.append（''+$first\u visible.attr（'id'）+'
'）；
});
请参见此处，我已检查了“忽略第一个div”的“样式”属性，并使用隐藏选择器检查了“获取所有其他div”


$（文档）.ready（函数（）{
var currElements=$（'.inner[style！=“display:none”]：hidden'）；//这里有两个div，id为inner2和inner3
警报（currElements[0].id）；//第一个div
警报（currElements[1].id）；//第一个div
});

内部1
内部2
内部3
MDN说：

使用“无”时，所有子体元素的显示也将关闭。文档被呈现为文档树中不存在该元素

因此，无论HTML元素是父元素的子元素是什么，都不会在HTML页面中呈现

而且，在父元素上应用的任何样式都不会在HTML页面中呈现

<>为了实现您想要的，如果您认为HTML元素应该在文档树中，那么尝试使用CSS可见性属性。例如：

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


获取一个标志值并循环每个
div.inner
以获取第一个可见元素。然后检查它的css属性

下面是经过测试的代码：

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

如果我理解正确，您可以像这样使用CSS模拟父对象被隐藏的效果

HTML

无法使用visibility/display/opacity属性的原因是，正如@Umesh所提到的，所有子元素也会将其显示/可见性/不透明度设置为不可见，就像文档树中不存在该元素一样

但是，使用此方法可以将元素的alpha设置为0，这不会影响子体，除非它们为这些属性设置了
inherit

希望这有帮助。
如果元素是隐藏的，则它是隐藏的，并且隐藏的父元素中的元素是隐藏的。请尝试类似的操作：
<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>

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

var $first_visible = $('div.inner').filter(function() {
   return !(this.style.visibility != '' || this.style.display != '');
}).first();
<div class="outer" style="visibility: hidden">
  <div id="inner1" class="inner" style="display: none"></div>
  <div id="inner2" class="inner" style="visibility: visible"></div>
  <div id="inner3" class="inner"></div>
</div>

var isValid=true;
$("div.inner").each(function() {
    if($(this).css("display") == "block" && isValid) {
        $("div#result").text($(this).attr('id'));isValid=false;
    }
});

<div class="outer hide">
    <div id="inner1" class="inner hide">Inner 1</div>
    <div id="inner2" class="inner">Inner 2</div>
    <div id="inner3" class="inner">Inner 3</div>
</div>

.hide {
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);

    // For an SVG
    fill: rgba(0,0,0,0);
    stroke-opacity: 0;
}