how to find image inside a div using jquery

Question

I am working on an html page where i have div element and also a inner div element. In the inner div element there is a image element. The main and inner div are 2 in numbers.

<div class="owl-stage-outer">

<div class="owl-item" style="width: 1903px;"><div class="header-single-slider">
                    <figure>
                        <img src="assets/img/sliders/slider01.jpg" alt="">
                        <figcaption>
                            <div class="content">
                                <div class="container inner-content text-left">
                                    <h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
                                    <p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
                                    <a href="#" class="boxed-btn fadeInDown animated" style="display: inline-block;">Read More <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </figcaption>
                    </figure>
                </div></div>

 <div class="owl-item active" style="width: 1903px;"><div class="header-single-slider">
                    <figure>
                        <img src="assets/img/sliders/slider02.jpg" alt="">
                        <figcaption>
                            <div class="content">
                                <div class="container inner-content text-left">
                                    <h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
                                    <p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
                                    <a href="#" class="boxed-btn fadeInDown animated" style="display: inline-block;">Read More <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </figcaption>
                    </figure>
                </div></div>
</div>

Here the main div whose class is 'owl-item' is used 2 times and the inner div whose class is 'header-single-slider' is also used 2 times. When the program runs The main div whose class is 'owl-item', its class changes to 'owl-item acitve' means this class is active now and second div class remain as 'owl-item'. after some seconds the second div will becomes active and its class becomes'owl-item active' and first will remain inactive and its class will be 'owl-item'

I want to find the image src of that div whose class is 'owl-item active'. For this i used the following query:

alert($('.owl-item active').children('div').children("img").attr('src'));

But it is showing alert message as 'Undefined'. How to solve this?

Answer 1

You forgot a . before active

$('.owl-item.active img').attr('src')

Answer 2

You can use find method.

console.log($('.owl-item.active').find('figure>img').attr('src'));

Answer 3

You didn't select your active owl-item correctly.

You can simply use

$('.owl-item.active>div>figure>img').attr('src')

If you're sure you only have one img in your div, just use '.owl-item.active img' instead.

console.log($('.owl-item.active>div>figure>img').attr('src'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage-outer">

  <div class="owl-item" style="width: 1903px;">
    <div class="header-single-slider">
      <figure>
        <img src="assets/img/sliders/slider01.jpg" alt="">
        <figcaption>
          <div class="content">
            <div class="container inner-content text-left">
              <h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
              <p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
              <a href="#" class="boxed-btn fadeInDown animated" style="display: inline-block;">Read More <i class="fas fa-arrow-right"></i></a>
            </div>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>

  <div class="owl-item active" style="width: 1903px;">
    <div class="header-single-slider">
      <figure>
        <img src="assets/img/sliders/slider02.jpg" alt="">
        <figcaption>
          <div class="content">
            <div class="container inner-content text-left">
              <h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
              <p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
              <a href="#" class="boxed-btn fadeInDown animated" style="display: inline-block;">Read More <i class="fas fa-arrow-right"></i></a>
            </div>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>