如何使用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>

这里，class为'owl-item'的main div被使用了2次，class为'header-single-slider'的inner 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

你没有正确选择你的activeowl-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>

Answer 2

您在激活之前忘记了.

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

Answer 3

您可以使用find 方法。

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