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-inner'）...它必须是元素的第一个子div，id ='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

所有这些答案看起来都是正确的但不适合我。即时通讯使用jquery mobile和那些带有类的div，例如'ui-btn-inner'会被jquery mobile listview控件自动添加。我想通过用$（document）来调用它们。已经失败了，因为我认为这些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>

使用inspect元素时的输出标记

<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

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

$("li div:first-child")

jquery找到孩子

4 个答案: