jquery查找孩子

Question

我得到了一个jQuery DOM遍历问题...我想从下面的标记中得到li的第一个div（孩子）id ='wpc_pics2840'。即<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> 

顺便说一句，请不要这样说：$（” UI的BTN-内 '）......它一定是与id元素的第一个孩子的div =' wpc_pics2840'

Answer 1

$('li#wpc_pics2840 div:first') 

例子：

http://jsfiddle.net/wRZ9K/

Answer 2

这应该是一个相当简单的选择......

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

或者，如果你知道类是什么，你可以使用类选择$('#wpc_pics2840 div.ui-btn-inner')。

Answer 3

我认为：第一胎儿选择器会做你想做的。 看到http://api.jquery.com/first-child-selector/

$("li div:first-child") 

Answer 4

所有这些问题的答案看起来是正确的，但不能为我工作。即时通讯使用jQuery的移动和那些与类例如“ui-btn内部”的div自动添加jQuery的移动列表视图控制。我认为通过调用$（document）.ready已失败，因为我认为这些div将在稍后添加。问题是，我应该已经添加了事件陷阱，当这些div ...如问题从这个问题源于Styling jquery mobile listviews

我的标记是

<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> 

输出标记时，检查元素用于

<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>