title: Is it possible to use multiple variables instead of selectors in jQuery
body: <p>I know that it's faster to do the following:</p>
  
  <pre><code>var $header = $("#header");
  $header.css({color:"#ff0000"});
  $header.find("a").addClass("foo");
  </code></pre>
  
  <p>Instead of:</p>
  
  <pre><code>$("#header").css({color:"#ff0000"});
  $("#header a").addClass("foo");
  </code></pre>
  
  <p>Because jQuery doesn't need to find the elements again in the DOM as we have direct reference to them.</p>
  
  <p>Let's say that I have this:</p>
  
  <pre><code>var $header_elements = $("#header li");
  var $footer_elements = $("#footer li");
  </code></pre>
  
  <p>And I use both individually for a few jQuery manipulations. But then, I need to do something on both. Using selector, I would do this:</p>
  
  <pre><code>$("#header li, #footer li").css({color:"#ff0000"});
  </code></pre>
  
  <p>But then, the DOM needs to be parsed again to find matching elements. Is there a way to use my previously declared variables instead of a new selector? Something like the following (which is <strong>not</strong> working, I know, it's to give an idea of what I'm looking for):</p>
  
  <pre><code>$($header_elements + $footer_elements).css({color:"#ff0000"});
  </code></pre>
  
  <p>I think that the selector returns some kind of array or object. What I'm looking for is a way to merge those. Anyone know if this is possible and how to do it?</p>
  
  <p>Thanks for your help!</p>