javascript - 如何使用jquery在div中查找图像

Question

我正在处理一个 html 页面，其中有 div 元素和一个内部 div 元素。在内部 div 元素中有一个图像元素。主div和内div在数字上都是2。

<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>

这里类为'owl-item'的主div被使用了2次，类为'header-single-slider'的内部div也被使用了2次。当程序运行时，类为'owl-item'的主div，它的类变为'owl-item acitve'意味着这个类现在是事件的，第二个div类仍然是'owl-item'。几秒钟后，第二个 div 将变为事件状态，其类变为“owl-item active”，第一个将保持非事件状态，其类将为“owl-item”

我想找到类为“owl-item active”的那个 div 的图像 src。为此，我使用了以下查询:

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

但它显示警告消息为“未定义”。如何解决？

Answer 1

你没有正确选择你的 active owl-item。

你可以简单地使用

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

如果您确定您的 div 中只有一个 img，只需使用 '.owl-item.active img' 即可。

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>