title: jQuery : How to Select input fields which are displayed in tabs
body: <p>I came across a situation, where I want to select the input elements which are not hidden and visible in other nav-tabs.</p>
  
  <p>I am using the following code to select the input fields</p>
  
  <pre><code>$("input[type!=hidden]").each(function(){
          ......
      });
  </code></pre>
  
  <p>But, it selects the input fields which are hidden using <strong>jQuery.hide()</strong> function, i.e. visibility none. Here I'm hiding the parents of input elements i.e. </p>
  
  <p>If I try to filter again with visibility property, jQuery treated the input elements in <strong>inactive(non-current) nav tabs as invisible</strong>. So, inactive tabs' input fields are not selected.</p>
  
  <pre><code>$("input[type!=hidden]").filter(:visible).each(function(){
              ......
          });
  </code></pre>
  
  <p>How to select input fields in this scenario?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" &gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" &gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
       $(document).ready(function(){
        
        $("#three").hide();  //Hiding div element
        
          $("button").click(function(){
              $("input:not([type='hidden'])").each(function(){
                  $(this).val("2");
              });
            $("#output").html("Output: " + $("#one").val() + $("#two").val() + $("#four").val());
          });
      });
      &lt;/script&gt;
  
      &lt;html&gt;
        &lt;body&gt;
        &lt;ul class="nav nav-tabs " role="tablist"&gt;
           &lt;li class="nav-item active"&gt;
             &lt;a class="nav-link" data-toggle="tab" href="#first" role="tab"&gt;First&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item" role="presentation"&gt;
               &lt;a class="nav-link" data-toggle="tab" href="#second" role="tab"&gt;Second&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;div class="tab-content" id="tab-contents"&gt;
        &lt;div class="tab-pane active" id="first" role="tabpanel"&gt;    
          &lt;input id="one" type="text" value="1"&gt;&lt;br&gt;    
          &lt;button&gt;Test&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="second" role="tabpanel"&gt;    
          &lt;input id="two" type="text" value="1"&gt;&lt;br&gt;
          &lt;div id="three"&gt;
            &lt;input id="four" type="text" value="1"&gt; 
          &lt;/div&gt;   
        &lt;/div&gt;
       &lt;/div&gt;
          Answer Should be : 221  (It should not change the hidden value)
          &lt;div id="output"&gt;&lt;/div&gt;
          &lt;/body&gt;
        &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>