jquery find child

ive got a jquery DOM traversing problem... i would like to get the first div (child) of li with id='wpc_pics2840' from the markup below. ie <div class="ui-btn-inner">

<li id="wpc_pics2840">
     <div class="ui-btn-inner">
          <div class="ui-btn-text">
            <a href="#" class开发者_高级运维="ui-link-inherit">
                <img width="40" height="40" src="http://www.veepiz.com/members/jimmydeantony/media/443_thumb.jpg" class="ui-li-thumb ui-corner-bl">
                <div style="font-size:9pt;font-weight:normal;">upload a bigger picture....</div>                
            </a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>

btw, please dont say something like $('.ui-btn-inner')... its got to be the first child div of element with id='wpc_pics2840'

---

$('li#wpc_pics2840 div:first')

Example:

http://jsfiddle.net/wRZ9K/

---

This should be a fairly simple selection...

$('#wpc_pics2840 div').first()

Or you could use the class selector $('#wpc_pics2840 div.ui-btn-inner') if you know what the class will be.

---

all these answers look correct but fail to work for me. im using jquery mobile and those divs with classes eg 'ui-btn-inner' are automatically added by jquery mobile listview control. i think by calling them with $(document).ready fails because i think those divs are added later. problem is that which event should i trap when those divs have been added... eg problem originates from this question Styling jquery mobile listviews

my markup is

<ul data-role="listview" class="ui-listview" data-inset="true" role="listbox">
    <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c" style='font-size:8pt;font-weight:normal'>
        <?php echo fmtDate($x->date); ?>,<?php echo $name; ?> wrote on <?php echo $wname; ?>'s wall
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:55px;background: url(http://www.veepiz.com/images/comment.png) no-repeat;padding:3px;padding-left:20px'><?php echo $crcount; ?></span>
        <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:5px;background: url(http://www.veepiz.com/images/like.gif) no-repeat;padding:3px;padding-left:20px'><?php echo $wlc; ?></span>
    </li>
    <li role="option" tabindex="0" data-theme="c" id='wpc_pics<?php echo $x->id; ?>' >
        <a href='#'>
            <img width="40" height="40" src='<?php echo $imgstr; ?>'/>
            <div style='font-size:9pt;font-weight:normal;'><?php echo nl2br(addSmilies(urlize(trim($x->msg))));?></div>                
        </a>
    </li>
</ul> 
<script type="text/javascript">
    window.wli.push('wpc_pics<?php echo $x->id; ?>');
</script> 

output markup when inspect element is used

<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" role="listbox">
        <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c ui-corner-top ui-btn-up-undefined" style="font-size:8pt;font-weight:normal">
            Today, 2 hour(s) ago,Veepiz Guru wrote on Gift Bassey's wall
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:55px;background: url(http://www.veepiz.com/images/comment.png) no-repeat;padding:3px;padding-left:20px">0</span>
            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:5px;background: url(http://www.veepiz.com/images/like.gif) no-repeat;padding:3px;padding-left:20px">1</span>
        </li>
        <li role="option" tabindex="0" data-theme="c" id="wpc_pics2840" class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner"><div class="ui-btn-text">
            <a href="#" class="ui-link-inherit">
                <img width="40" height="40" src="http://www.veepiz.com/members/jimmydeantony/media/443_thumb.jpg" class="ui-li-thumb ui-corner-bl">
                <div style="font-size:9pt;font-weight:normal;">upload a bigger picture....</div>                
            </a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
    </ul>

---

I think the :first-child selector would do what you want. see http://api.jquery.com/first-child-selector/

$("li div:first-child")