How can I select the first image in this div with jquery?

Question

I have this div with a bunch of other divs and images. The main div is m-carousel-inner. What I want to do is select the first img element in this div. How do I do this in javascript or 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 --> 

Thanks.

Answer 1

Like this?

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

Fiddle

See : first

The first part of $('.m-carousel-inner') is the selector for your container element with the class .m-carousel-inner , which will return the DOM element wrapped by jQuery and apply .find('img:first') to find the first instance of img as its child at any level.

Answer 2

in jquery you can

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

Answer 3

you can also use jQuery first() function with jQuery selector

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