JQuery найти ребенка

Question

У меня проблема с обходом DOM в jquery ... Я хотел бы получить первый div (child) из li с 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

все эти ответы выглядят правильно, но у меня не получается.Я использую jquery mobile, и эти div с классами, например, 'ui-btn-inner', автоматически добавляются с помощью jquery mobile control listview.я думаю, что вызвать их с $ (document) .ready не удается, потому что я думаю, что эти div добавлены позже.проблема в том, какое событие я должен перехватить, когда эти div были добавлены ... например, проблема возникает из этого вопроса Стилизация jquery мобильных списков просмотра

моя разметка

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

Я думаю, что: выбор первого ребенка будет делать то, что вы хотите. см http://api.jquery.com/first-child-selector/

$("li div:first-child")

Answer 4

Это должен быть довольно простой выбор ...

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

Или вы можете использовать селектор класса $('#wpc_pics2840 div.ui-btn-inner'), если знаете, каким будет класс.