Игнорировать видимость внешних элементов и выбрать первый видимый дочерний элемент в селекторе jQuery

Ответ 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 упоминает, что все элементы-потомки также получат их отображение/видимость/непрозрачность как не видимые, как если бы элемент не существовал в дерево документа.

Но используя этот метод, вы устанавливаете альфа-значение в 0 элемента, и это не влияет на потомков, если они не имеют inherit для этих свойств.

Надеюсь, что это поможет.

Ответ 2

Один из вариантов - показать родительский элемент, проверить первый видимый элемент и снова скрыть родительский элемент.

В качестве альтернативы, поскольку элемент имеет встроенный 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();

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

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

Ответ 3

Как сказал adeneo, после его скрытия, вы не можете многое сделать.

Однако вы можете проверить перед рукой, показать ее независимо, затем скрыть ее снова, если она была скрыта

var wasVisible = $(".outer").is(':visible');

$(".outer").show();

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

if (!wasVisible) {
  $(".outer").hide();
}

console.log($first_visible.length);

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

Ответ 4

напишите два класса: сначала один для отображения, а последний - для скрытия. С этим вы можете выбрать все divs, которые "видны", даже если родитель "скрыт"

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

.disable{
  display : none;
}

.enable{
  display : block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer disable">
  <div id="inner1" class="inner disable">1</div>
  <div id="inner2" class="inner enable">2</div>
  <div id="inner3" class="inner enable">3</div>
</div>

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

Ответ 5

Мое предложение - использовать функцию фильтра, но только для выбора первого видимого элемента (но это также скрыто, потому что родитель скрыт):

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

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

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

Ответ 6

См. здесь, я проверил атрибут стиля для игнорирования первого div. И проверьте со скрытым селектором, чтобы получить все остальные div.

$(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
  });

<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">Inner 1</div>
  <div id="inner2" class="inner">Inner 2</div>
  <div id="inner3" class="inner">Inner 3</div>
</div>

Ответ 7

MDN говорит:

Когда вы используете none, все элементы-потомки также отключены. Документ отображается так, как будто этот элемент не существует в дереве документов.

Следовательно, независимо от того, какие элементы HTML являются дочерними элементами родительского элемента, на странице HTML не будет отображаться.

Кроме того, любые стили, которые были применены к родительскому элементу, не будут отображаться на странице HTML.

Чтобы добиться того, чего вы хотите, и если вы считаете, что ваш HTML-элемент должен находиться в дереве документов, попробуйте использовать свойство видимости 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>

JS Fiddle

Ответ 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;
    }
});