Menu
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 within this div. How would I go about doing 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 -->
Thank you.
340
The :first selector selects the first element.
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
jQuery first() Method The first() method returns the first element of the selected elements.
jQuery find() Method The find() method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on.
Like this?
$('.m-carousel-inner').find('img:first');
Fiddle
See :first
First part $('.m-carousel-inner') is the selector for your container element with class .m-carousel-inner which will return the jquery wrapped DOM element, and apply .find('img:first') to find the first instance of img as its child at any level.
161
in jquery you could
<script>$('.m-carousel-inner img:first');</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
