1

I am having two input elements of type text inside bootstrap panel. I am trying to get count of visible elements inside collapsed 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>

When i try to use below statement with panel expand i can get the length 1.

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

But the same line results 0 when panel is in collapsed state. Is there any i can achieve this ? Thanks in advance.

vinoth kumar
  • 196
  • 2
  • 13
  • Why are you using `:visible` selector to look for elements inside hidden parent? Not really clear what you need to accomplish – charlietfl Dec 14 '18 at 14:25
  • Hello vinoth, you are checking for `:visible`. As far as i understand this attribute, this will always be false, when the element is hidden, even when it is only hidden because the parent was set to `display: none;` have a look at this answer https://stackoverflow.com/a/178450/5086829 – JustAMicrobe Dec 14 '18 at 14:27

2 Answers2

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

This differentiates from a :hidden selector, since you're using inline display CSS rules

Edit: This won't do everything you're looking for, but should be the element filter you need in the existing code

Chris
  • 1,355
  • 1
  • 17
  • 36
  • Not accurate. css() as getter uses computed style not inline. Is not the same as checking `element.style.display` – charlietfl Dec 14 '18 at 14:22
  • Apologies if my explanation was inaccurate, I had tested it on JSFiddle and made an assumption after it behaved as expected. The code should perform in a desired manner, however – Chris Dec 14 '18 at 14:25
  • Will do the same as `:hidden` also – charlietfl Dec 14 '18 at 14:26
0

You can use the following script to get the all visible inputs length - 

 $(".panel input:not([style*='display:none'])").length
onkar.v
  • 125
  • 9