javascript - 如何访问折叠面板内的可见 html 元素？

Question

我在 Bootstrap 面板中有两个文本类型的输入元素。我正在尝试计算折叠的 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").filter(function() { return $(this).css("display") == "none" })

这与 :hidden 选择器不同，因为您使用的是内联显示 CSS 规则

编辑:这不会做你正在寻找的一切，但应该是你在现有代码中需要的元素过滤器