title: Jquery - count elements with filter function and display it
body: <p>I have 1-n <code>&lt;div class="project"&gt;</code> elements which can open their respective table with use of <code>.collapse</code> class. I filter the text content in every table to hide or show its content. Now I count the number of matching elements for every table. I want to display the value of the counter in every respective <code>&lt;span&gt;</code>of the <code>&lt;div&gt;</code> element. Someone may knows how I can do that?</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="project"&gt;
      &lt;div class="project-Content"&gt;
          &lt;div style="margin-top:10px; margin-bottom:10px; margin-left:10px"&gt;
              &lt;a data-toggle="collapse" data-target="#vw" style="cursor:pointer;"&gt;
                 &lt;!--I WANT TO DISPLAY IT IN THE () of the span--&gt;
                 &lt;b&gt;Volkswagen &lt;span&gt;()&lt;/span&gt;&lt;/b&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="collapse" id="vw"&gt;
          &lt;table class="table table-striped table-hover"&gt;
              &lt;tr class="carsName"&gt;
                  &lt;td&gt;Golf&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="carsName"&gt;
                  &lt;td&gt;Polo&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="carsName"&gt;
                  &lt;td&gt;Passat&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- ...SOME MORE OF &lt;div class="Project"&gt;... --&gt;
  
  &lt;input type="text" class="form-control filter" id="testFilter" name="testFilter" placeholder="Search"/&gt;
  </code></pre>
  
  <p>My JQuery:</p>
  
  <pre><code>//Filter and Count matching elements
  $('#testFilter').keyup(function () {
      var filter_array = new Array();
      var filter = this.value.toLowerCase();  // no need to call jQuery here
      filter_array = filter.split(' '); // split the user input at the spaces
      var arrayLength = filter_array.length; // Get the length of the filter array
  
      $('.collapse, .in').each(function() {
          // counter for visible tr-elements
          var nrOfVisibleCars = 0;
  
          $(this).find("tr").each(function() {
  
              var _this = $(this);
              var car = _this.find('td').text().toLowerCase();
              var hidden = 0; // Set a flag to see if a tr was hidden
  
              // Loop through all the words in the array and hide the tr if found
              for (var i=0; i&lt;arrayLength; i++) {
                  if (car.indexOf(filter_array[i]) &lt; 0) {
                      _this.hide();
                      hidden = 1;
                  }
              }
              // If the flag hasn't been tripped show the tr
              if (hidden == 0)  {
                  _this.show();
                  //count all visible tr-elements
                  nrOfVisibleCars++;
              }
          });
          // Show for every closed Collapse (.collapse) or open Collapse (.in) the counter
          alert(nrOfVisibleCars);
  
          // HERE I NEED SOME NEW CODE TO SHOW 'nrOfVisibleCars'
          // IN &lt;span&gt;()&lt;/span&gt; OF EVERY RESPECTIVE &lt;div&gt;
      });
  });
  </code></pre>
  
  <p>Thanks in advance for the help.</p>