title: Filter by search using text found in element within each div
body: <p>I found a fiddle that was useful for hiding text based on the text used in a search box, but have not been able to figure out how to adapt this method to a div with multiple elements in it. How could I change the jQuery in the attached fiddle to make it filter the div elements that match the search entered instead of the text found in the list items?</p>
  
  <p><a href="http://jsfiddle.net/point71echo/rof67uy6/2/" rel="noreferrer">http://jsfiddle.net/point71echo/rof67uy6/2/</a> </p>
  
  <pre><code>&lt;input placeholder="Search Me" id="box" type="text" /&gt;
  
  &lt;ul class="navList"&gt;
      &lt;li&gt;apples&lt;/li&gt;
      &lt;li&gt;apricots&lt;/li&gt;
      &lt;li&gt;acai&lt;/li&gt;
      &lt;li&gt;blueberry&lt;/li&gt;
      &lt;li&gt;bananas&lt;/li&gt;
      &lt;li&gt;cherry&lt;/li&gt;
      &lt;li&gt;coconut&lt;/li&gt;
      &lt;li&gt;donut&lt;/li&gt;
      &lt;li&gt;durean&lt;/li&gt;
  &lt;/ul&gt;
  
  
          &lt;div class="connect-cat" catname="apples" style="visibility: visible; display: block;"&gt;
              &lt;a href="/connect/apples"&gt;
                  &lt;div style="padding:5px;cursor:pointer;"&gt;
                      &lt;div&gt;
                          &lt;img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples"&gt;
                      &lt;/div&gt;
                      &lt;span&gt;apples&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
  
  
          &lt;div class="connect-cat" catname="apricots" style="visibility: visible; display: block;"&gt;
              &lt;a href="/connect/apricots"&gt;
                  &lt;div style="padding:5px;cursor:pointer;"&gt;
                      &lt;div&gt;
                          &lt;img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots"&gt;
                      &lt;/div&gt;
                      &lt;span&gt;apricots&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here's the jQuery used:</p>
  
  <pre><code>$('#box').keyup(function(){
     var valThis = $(this).val().toLowerCase();
      if(valThis == ""){
          $('.navList &gt; li').show();
      } else {
          $('.navList &gt; li').each(function(){
              var text = $(this).text().toLowerCase();
              (text.indexOf(valThis) &gt;= 0) ? $(this).show() : $(this).hide();
          });
     };
  });
  </code></pre>