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

Question

У меня есть два элемента ввода текста типа внутри панели начальной загрузки.Я пытаюсь получить количество видимых элементов внутри свернутого div.

<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
          <div id="inside"
            <label for="txt_1">Name</label>
            <input id="txt_1" type="text">
            <label for="txt_2" style="display:none;">Age</label>
            <input id="txt_2" type="text" style="display:none;">
          </div>
      </div>
    </div>
  </div>      
</div>

Когда я пытаюсь использовать приведенное ниже выражение с расширением панели, я могу получить длину 1.

$('.panel input:visible').length

Нота же строка показывает 0, когда панель находится в свернутом состоянии.Могу ли я достичь этого?Заранее спасибо.

Answer 1

Вы можете использовать следующий скрипт для получения длины всех видимых входных данных -

 $(".panel input:not([style*='display:none'])").length

Answer 2

$(".panel input").filter(function() { return $(this).css("display") == "none" })

Это отличается от: скрытого селектора, так как вы используете правила CSS для встроенного отображения

Редактировать: Это не будет делать все, что вы ищете, но должно быть фильтром элемента, который вынужно в существующем коде