Come selezionerei la prima immagine in questo div con jquery?

Question

Ho questo div con un mucchio di altre div e immagini. Il div principale è m-carousel-inner. Quello che voglio fare è selezionare il primo elemento img all'interno di questo div. Come faccio a fare questo in javascript o 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 --> 

Grazie.

Answer 1

Ti piace?

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

Fiddle

Vedi :first

prima parte $('.m-carousel-inner') è il selettore per il vostro elemento contenitore con classe .m-carousel-inner che restituirà il jquery avvolto elemento DOM, e applicare .find('img:first') per trovare il primo esempio di img come suo figlio a qualsiasi livello.

Answer 2

in jQuery si potrebbe

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

Answer 3

è anche possibile utilizzare la funzione jQuery first() con il selettore jQuery

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