Using jQuery to select direct child of div
<p>I am trying to select a direct child of an element. For example, given a DOM structured as:</p>

<pre><code>&lt;div class="track"&gt;
   &lt;div class="a"&gt;&lt;/div&gt;
   &lt;div class="b"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="track"&gt;
   &lt;div class="a"&gt;&lt;/div&gt;
   &lt;div class="b"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="track"&gt;
   &lt;div class="a"&gt;&lt;/div&gt;
   &lt;div class="b"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When a user clicks on say the first track div, how can I grab the immediate a and b underneath it?</p>

<p>I've tried using</p>

<pre><code>$(this).children(".a");

$(this).find(".a");
</code></pre>

<p>but it always grabs references to the very bottom track instead. Any help is very much appreciated! Thanks!</p>

<p>Edit: My problem lied in another section of my code where I was temporarily referencing a track. Therefore, when I would click on a track, it would reference a different track. Thank you all for your help though!</p>
