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?
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>
You forgot a .
before active
$('.owl-item.active img').attr('src')
您可以使用find
方法。
console.log($('.owl-item.active').find('figure>img').attr('src'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.