Question

我正在开发一个html页面，其中我有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”

我想找到该类的图像src，其类为'owl-item active'。为此，我使用了以下查询：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你忘记了 .才能激活

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

Answer 3

您可以使用find方法。

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

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

3 个答案: