Question

I am trying to select a direct child of an element. For example, given a DOM structured as:

<div class="track">
   <div class="a"></div>
   <div class="b"></div>
</div>
<div class="track">
   <div class="a"></div>
   <div class="b"></div>
</div>
<div class="track">
   <div class="a"></div>
   <div class="b"></div>
</div>

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

I’ve tried using

$(this).children(".a");

$(this).find(".a");

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

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!

Answer 1

Jsfiddle Reference

$(".track").click(function(){
    alert($(this).children(".a").html());
    alert($(this).children(".b").html());
})