html5 - jquery selecting a class nested within another class -

okay i'm learning jquery , need i've looked around , tried things no luck. anyways have html dom structure this:

<div id='foo'>    <div class='1'>        <div class='a'></div><div class='b'> </div    </div>    <div class='2'>        <div class='a'></div><div class='b'> </div>    </div>    <div class='3'>        <div class='a'></div><div class='b'> </div>    </div> </div> 

what i'm trying accomplish when click button 1 of (1,2,3 all) jquery show's respective class inside foo or in case of all classes. example: click button 1 dom looks

<div id='foo'>    <div class='1'>        <div class='a'></div><div class='b'>     </div> </div> 

now i've tried doing following command's i've found solution's other similar post on no luck: (i have case working none of individual cases)

 $("#foo").find(".1").fadeout();  $("#foo  .1").fadeout();  $("#foo > .1").fadeout();  $("#foo,  .1").fadeout(); // fades out of foo 

so how do properly? desired result, or have missed major concept somewhere, , not possible?

note on edit: have edited close div ... accidently did example simplified entire code

i give class (say btn) button denote group of elements:

<div id='foo'>    <div class='btn 1'>        <div class='a'></div><div class='b'></div>    </div>    <div class='btn 2'>        <div class='a'></div><div class='b'></div>    </div>    <div class='btn 3'>        <div class='a'></div><div class='b'></div>    </div> </div> 

then write:

 $(document).ready(function(){     $('#foo .a').hide();      var $btn = $('#foo > .btn');     $('#foo').on('click', '.btn', function() {         $btn.find('.a').fadeout();         $(this).find('.a').fadein();     }); }); 

http://jsfiddle.net/tunb2/

my jquery show's respective class inside

the key idea using context selector narrow down number of selected elements:

$(this).find('.a')