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（fiddle）：

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模拟隐藏父级的效果。

HTML

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

CSS

.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;
}

你不能使用visibility / display / opacity属性的原因是因为@Umesh提到所有后代元素也会使它们的显示/可见性/不透明度不可见，好像该元素不存在于文件树。

但是使用此方法可以将alpha设置为0，除非为这些属性设置了inherit，否则这不会影响后代。

希望这有帮助。

Answer 2

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

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

Updated Example

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

＆＃13;

var $first_visible = $(".inner").filter(function () {
  return this.style.display !== 'none';
}).first();

$("div#result").text('First visible: #' + $first_visible[0].id);

＆＃13;

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

＆＃13;

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

Updated Example

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

＆＃13;

var $first_visible = $(".inner").filter(function () {
  return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();

$("div#result").text('First visible: #' + $first_visible[0].id);

＆＃13;

#inner1 { display: none; }

＆＃13;

<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"></div>
  <div id="inner2" class="inner"></div>
  <div id="inner3" class="inner"></div>
</div>

<div id="result"></div>

＆＃13;

Answer 3

正如阿德内诺所说，一旦隐藏起来，你就无能为力。

但是，您可以事先检查，无论如何显示，然后再隐藏它

＆＃13;

var wasVisible = $(".outer").is(':visible');

$(".outer").show();

var $first_visible = $("div.inner:visible:first");

if (!wasVisible) {
  $(".outer").hide();
}

console.log($first_visible.length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

＆＃13;

Answer 4

写两个类：第一个显示，最后一个隐藏。有了它，你可以选择所有“可见”的div，即使父母是“隐藏”

...NOT IN (
    SELECT RoomTypeId FROM Hotel_Rates_Room
    WHERE RoomTypeId='B1C02BD5-80B7-4A65-9699-142D07AB70CF'
      AND RoomTypeId='FF3756C7-4D75-4579-A48B-C8A911D584A0')...

var $first_visible = $("div.inner.enable");
console.log($first_visible);
$("div#result").text($first_visible[0].id);

.disable{
  display : none;
}

.enable{
  display : block;
}

Answer 5

我的建议是使用过滤器功能但仅选择第一个可见元素（但由于隐藏了父元素，因此也隐藏了这个元素）：

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

＆＃13;

$(function () {
  var $first_visible = $('div.inner').filter(function() {
    return !(this.style.visibility != '' || this.style.display != '');
  }).first();
  $('body').append('<p>' + $first_visible.attr('id') + '</p>');
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.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>

＆＃13;

Answer 6

在这里看到我已经检查了忽略第一个div的样式属性。并检查隐藏的选择器以获取所有其他div。

RuntimeError: uia action failed because: Input:
UIATarget.localTarget().frontMostApp().document.getElementById('Identifier').click(). 
Error: TypeError: undefined is not an object (evaluating 'UIATarget.localTarget().
frontMostApp().document.getElementById')  eval code

$(document).ready(function(){
  var currElements=$('.inner[style!="display: none"]:hidden'); // Here you are get two div with id inner2 and inner3
  alert(currElements[0].id); // First div
  alert(currElements[1].id); // First div
  });

Answer 7

MDN说：

当您使用none时，所有后代元素的显示都会关闭。渲染文档，好像文档树中不存在该元素。

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

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

为了达到你想要的效果，如果你认为你的HTML元素应该在文档树中，那么尝试使用CSS visibility属性。例如：

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

JS Fiddle

Answer 8

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

以下是经过测试的代码：

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

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

8 个答案: