Jak wybrałbym pierwszy obraz w tym dziale przy pomocy jquery?

Question

Mam tego div z grupą innych div i obrazów. Główny div to m-carousel-inner. Co chcę zrobić, to wybrać pierwszy element img w tym div. Jak mam to zrobić w javascript lub jquery?

<div class="m-carousel-inner"> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<a href="#"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</a> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 

<div class="m-item"> 
<div class="m-card-light"> 
<div class="mqc_img"> 
<img src="http://placehold.it/280x210"> 
</div><!-- end .mqc_img --> 
<div class="mqc_info"> 
<h5>Title</h5> 
Lorem ipsum dolor sit amet 
</div><!-- end .mqc_info --> 
</div> 
</div> 
</div><!-- end .m-carousel-inner --> 

Dziękuję.

Answer 1

Podoba Ci się to?

$('.m-carousel-inner').find('img:first'); 

Fiddle

Zobacz :first

Pierwsza część $('.m-carousel-inner') jest selektor dla elementu pojemnika z klasą .m-carousel-inner który zwróci jQuery owinięta elementem DOM i stosować .find('img:first') aby znaleźć first instance of img jako dziecko na dowolnym poziomie.

Answer 2

w jQuery mogłeś

<script>$('.m-carousel-inner img:first');</script> 

Answer 3

można również skorzystać z funkcji jQuery first() selektor jQuery

<script> $('.m-carousel-inner img').first(); </script>