Как я могу посчитать элементы видимого набора внутри скрытого элемента?

Question

У меня есть несколько элементов внутри div. Некоторые элементы скрыты, некоторые нет.

<div class="master">
  <div class="child">element 1</div>
  <div class="child" style="display:none">element 2</div>
  <div class="child">element 3</div>
  <div class="child">element 4</div>
</div>

Я могу посчитать видимые элементы по $('.child:visible').length (в данном случае это будет 3)

Но если главный div невидим Сам я больше не могу считать видимые дочерние элементы (так как они также невидимы своим родительским div)

<div class="master" style="display:none">
  <div class="child">element 1</div>
  <div class="child" style="display:none">element 2</div>
  <div class="child">element 3</div>
  <div class="child">element 4</div>
</div>

Я получаю 0 видимых элементов. Есть ли другой способ подсчитать те элементы, которые не являются явными невидимыми?

Answer 1

Обычно вы можете использовать селектор :visible для этого, но поскольку родитель также скрыт, он не будет работать здесь.

Обходной путь, который вы можете использовать в этом случае, это использовать filter() на дети и определить, какие не установлены на display: none:

let count = $('.master .child').filter((i, el) => el.style.display !== 'none').length;
console.log(count);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="master" style="display: none">
  <div class="child">element 1</div>
  <div class="child" style="display: none">element 2</div>
  <div class="child">element 3</div>
  <div class="child">element 4</div>
</div>