jQuery找到孩子

Question

我遇到了 jquery DOM 遍历问题...我想从下面的标记中获取 id='wpc_pics2840' 的 li 的第一个 div（子）。即<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-inner')... 它必须是 id='wpc_pics2840' 元素的第一个子 div

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

所有这些答案看起来都正确，但对我不起作用。我正在使用jquery mobile，并且那些带有类例如'ui-btn-inner'的div由jquery mobile listview控件自动添加。我认为用 $(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>

Answer 4

我认为 :first-child 选择器会做你想做的事。 见http://api.jquery.com/first-child-selector/

$("li div:first-child")