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")
精彩评论