title: Speeding up this jQuery-code with selectors
body: <p>i wrote a filter for a list of many objects. Users can choose their options in via radio-buttons. </p>
  
  <p>Within my filter functionality i select the checked radio buttons of both radio groups/sets:</p>
  
  <pre><code>if ( $('#filter input[name="interval"]:checked').val() == 'all' ) {
      if( $('#filter input[name="day"]:checked').val() == 'all' ) {
          var searchSelector = "li";
      } else {
          var searchSelector = "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
      }
  } else {
      if( $('#filter input[name="day"]:checked').val() == 'all' ) {
          var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]";
      } else {
          var searchSelector = "li[data-interval=" + $('#filter input[name="interval"]:checked').val() + "]" + "li[data-day=" + $('#filter input[name="day"]:checked').val() + "]";
      }
  }
  </code></pre>
  
  <p><strong>As it's said in the <a href="http://www.artzstudio.com/2009/04/jquery-performance-rules/#cache-jquery-objects" rel="nofollow">jQuery Performance Rules</a> i should cache jQuery objects. Usually this practice always works — but in this case the values of my second radio buttons always outputs the value of the first checked value.</strong></p>
  
  <h2>Any ideas, how i can simplify this jQuery code?</h2>
  
  <p><em>THANKS</em></p>
  
  <p>Here is the HTML for the buttons:</p>
  
  <pre><code>&lt;form id="filter"&gt;
      &lt;fieldset&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="all"&gt;
              all&lt;/label&gt;
          &lt;label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="hourly"&gt;
              hourly&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="daily"&gt;
              daily&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="weekly"&gt;
              weekly&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="monthly"&gt;
              monthly&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="interval" value="yearly"&gt;
              yearly&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="all"&gt;
              all&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="monday"&gt;
              monday&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="tuesday"&gt;
              tuesday&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="wednesday"&gt;
              wednesday&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="thursday"&gt;
              thursday&lt;/label&gt;
          &lt;label&gt;
              &lt;input type="radio" name="day" value="friday"&gt;
              friday&lt;/label&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this is what my list looks like:</p>
  
  <pre><code>&lt;li data-day="monday" data-interval="weekly"&gt;foo&lt;/li&gt;
  &lt;li data-day="friday" data-interval="yearly"&gt;foo&lt;/li&gt;
  </code></pre>