title: How to get index without counting the hidden elements?
body: <p>I'm trying to get the index of clicked element. This works fine so far.</p>
  
  <p>Problem is that you can <code>hide</code> elements. If an element is hidden I don't want it to be "counted" in the index.</p>
  
  <p>If you have a look at the fiddle and all boxes are orange the index is how it should be. If you click on <code>Click me to hide some divs</code> -- they don't get removed, in reality they get a <code>display:none;</code> here they just get another color to give you an idea -- they also get the class <code>hidden</code> so now I don't want the index to index them. But if I click on <code>Div 2</code> I would like the index to show <strong><code>1</code></strong></p>
  
  <p>I've tried with <code>$('div').not('hidden')</code> fiddle here -> <a href="http://jsfiddle.net/rva54sy3/2/" rel="nofollow">http://jsfiddle.net/rva54sy3/2/</a></p>
  
  <pre><code>&lt;script&gt;
  (function($){
      var indexBoxes = function(e) {
          $element = $(this);
          var index = $element.not('.hidden').index();
          $( "h3.txt" ).text( "That was div index #" + index );
      }
      $(document).on( 'click', '.getIndex', indexBoxes);
  })(jQuery);
  
  $('.hide-some-divs').on('click',function(){
      $('.hide').addClass('hidden').closest('.wrap').addClass('hidden');
  });
  &lt;/script&gt;
  
  &lt;h3 class="txt"&gt;Click a div!&lt;/h3&gt;
  &lt;div class="wrap clearfix"&gt;
      &lt;div class="getIndex"&gt;Div 0&lt;/div&gt;
      &lt;div class="getIndex hide"&gt;Div 1&lt;/div&gt;
      &lt;div class="getIndex"&gt;Div 2&lt;/div&gt;
      &lt;div class="getIndex hide"&gt;Div 3&lt;/div&gt;
      &lt;div class="getIndex"&gt;Div 4&lt;/div&gt;
      &lt;div class="getIndex hide"&gt;Div 5&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="hide-some-divs"&gt;Click me to hide some divs&lt;/div&gt;
  </code></pre>
  
  <p>and if you like some styling:</p>
  
  <pre><code>&lt;style&gt;
  .getIndex {
      width:100px;
      height:100px;
      margin:5px;
      background-color:orange;
      float:left;
  }
  .wrap.hidden &gt; div.hide {
      background-color:#fafafa;
  }
  .hide-some-divs {
      background-color:#afafff;
      padding:10px;cursor:pointer;
      margin:20px auto;
      width:250px;
      text-transform:uppercase;
      text-align:center;
  }
  .clearfix:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
  .clearfix { display: inline-block; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Thanks for advices</p>