Question

我在引导面板中有两个类型为text的输入元素。我试图获取折叠后的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规则

编辑：这不会满足您的所有需求，但应成为现有代码中所需的元素过滤器

Answer 2

您可以使用以下脚本获取所有可见输入的长度-

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

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

2 个答案: