Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
40
rated 0 times [  46] [ 6]  / answers: 1 / hits: 29130  / 11 Years ago, thu, july 11, 2013, 12:00:00

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.


More From » jquery

 Answers
15

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.


[#77052] Wednesday, July 10, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jaylynbrynnk

Total Points: 706
Total Questions: 98
Total Answers: 91

Location: Israel
Member since Thu, Jan 7, 2021
3 Years ago
;