jQuery - I am not getting the right child -

so trying fake .click() event on first <a> within .glossnav within specific .words when click .letter.

here have tried:

$(".letter").click(function(){     var whichletter = $(this).children("span").text();     var selectedgloss = "#glossary-" + whichletter;      $(".words").fadeout(200);     $('.letter').removeclass('underline');      $(selectedgloss).delay(200).fadein(200);     $(this).addclass('underline');        if($(selectedgloss).children(".glossnav").length > 0) // there isn't nav.       {             alert("yippee!");             $(selectedgloss).children(".glossnav").first().click();       } }); 

the "yippee!" alerting.

here nav html (this glossary im building):

<div id="modelglossary"><div class="letterbar">     <a href="javascript:void(0)" class="letter" id="selector-a">         <span>a</span>     </a>     <a href="javascript:void(0)" class="letter" id="selector-b">         <span>b</span>     </a>     <a href="javascript:void(0)" class="letter" id="selector-c">         <span>c</span>     </a> .... , on </div> 

here bulk of html:

<div class="words" id="glossary-s">     <div id="s-page-1" class="glosspage">         <span class="glossblock">             <strong>zedcard</strong> - see <a class="wordref" href="javascript:void(0)">composite card</a>.         </span>         <span class="glossblock">             <strong>senior model</strong> - senior model professional model in 40s/50s/60s. average age rising, advertisements go more , more older models approach target group. senior model has book can show lot of experience or after being booked ads publications beginning on.         </span>         <span class="glossblock">             <strong>set</strong> - action of shoot takes place within professional studio or within location. includes elements make shoot; example lighting, camera, art direction , art directed scenery.         </span>         <span class="glossblock">             <strong>shooting</strong> - shooting in general means implementation of photo or film shoots.         </span>     </div>     <div id="s-page-2" class="glosspage">         <span class="glossblock">             <strong>stock photos</strong> - stock photography supply of photographs licensed specific uses. used fulfill needs of creative assignments instead of hiring photographer. today, stock images presented in searchable online databases, purchased , delivered online. often, produced in studios using wide variety of models posing professionals, stereotypes, expressing stereotypical emotions , gesticulations or involving pets.         </span>         <span class="glossblock">             <strong>stylist</strong> - stylist in charge of outfit of model , discussing @ length photographer or director, theme of shoot.         </span>     </div>     <div class="glossnav">         <a href="javascript:void(0)" page="s-page-1">1</a>         <a href="javascript:void(0)" page="s-page-2">2</a>     </div> </div> 

i think missing a in selector. because .glossnav div not <a>..

like this: $(selectedgloss).find(".glossnav a").first().click();

you should use .find() instead of .children() because select direct child element, , not in case.. :)

see edit..