title: How to use a variable as a DOM object within scripts
body: <p>I have a lot of <code>functions</code> going on that will be duplicated for multiple instances, and I'm trying to streamline everything and make the <code>functions</code> easily reused.</p>
  
  <p>To avoid hard coding values, I'm trying to establish a parent <code>ID</code> to be able to run some of the more in depth <code>loops</code>.</p>
  
  <h3><a href="http://jsfiddle.net/hgwNU/" rel="nofollow">http://jsfiddle.net/hgwNU/</a></h3>
  
  <p><strong>So if I have...</strong></p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;div id="one"&gt;
      &lt;p&gt;Hello&lt;/p&gt;
      &lt;p&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="two"&gt;
      &lt;p&gt;Hello&lt;/p&gt;
      &lt;p&gt;Hello&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>Script</h3>
  
  <pre><code>var playerOne = $('#one');
  
  $("p").each(function() {
      $(this).text('Changed');
  });
  </code></pre>
  
  <p>I tried something like:</p>
  
  <pre><code>$(playerOne + "p").each(function() {
  </code></pre>
  
  <p>But I got an <code>object conflict</code> error.</p>
  
  <p><strong>How would I incorporate <code>playerOne</code> variable in this example to only target the <code>p</code> elements in <code>#one</code> instead of all of them?</strong></p>
  
  <h3><a href="http://jsfiddle.net/hgwNU/" rel="nofollow">http://jsfiddle.net/hgwNU/</a></h3>