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>