title: Using jQuery to find list items containing specific text in nested lists
body: <p>I am working on setting up a way to select or filter a list using radio groups of "modifiers" or attributes. The lists I'm filtering can be multi-level nested ul-li. </p>
  
  <p>My eventual goal is to have only the intended list items with the correct attribute or text show, the others would be hidden.</p>
  
  <p>In my example, I'm having issues with selecting only what I want. It's selecting the whole nested ul if there is an li that contains the text I'm looking for.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/jhottle/9BQcj/5/" rel="nofollow noreferrer">jsFiddle</a> I made</p>
  
  <pre><code>$('.refine').on('change', 'input[type="radio"]', function() {
  
      var sortattr = $(this).val();   
  
      $(".mylist li:contains('" + sortattr + "')").each(function() {
          $(this).addClass('here');
      });
  });
  
  &lt;form class="refine" role="form"&gt;
      &lt;input type="radio" value="left" name="modifiers" id="reflatleft"&gt;Left
      &lt;input type="radio" value="right" name="modifiers" id="reflatright"&gt;Right
      &lt;input type="radio" value="unspecified" name="modifiers" id="reflatunspecifed"&gt;Unspecified
  &lt;/form&gt;                         
  
  &lt;ul class="mylist"&gt;
      &lt;li&gt;item misc header
        &lt;ul&gt;
          &lt;li&gt;item left&lt;/li&gt;
          &lt;li&gt;item right&lt;/li&gt;
          &lt;li&gt;item left&lt;/li&gt;
          &lt;li&gt;item unspecified&lt;/li&gt;
          &lt;li&gt;item somethings else&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;item left&lt;/li&gt;
      &lt;li&gt;item right&lt;/li&gt;
      &lt;li&gt;item left&lt;/li&gt;
      &lt;li&gt;item unspecified&lt;/li&gt;
      &lt;li&gt;item somethings else&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>