Question

我正在制作幻灯片，我使用JS来设置控件的位置。为此，我得到第一张图像的高度和宽度来进行计算。

HTML：

database.yml

JS：

<div class="slideshow">
          <figure class="image">
            <img src="images/or-staff.jpg" />
            <figcaption>Insert caption</figcaption>
          </figure>
          <figure class="image">
            <img src="images/patient-phone.jpg" />
            <figcaption>Insert caption</figcaption>
          </figure>
           <figure class="image">
            <img src="images/labor-nurse.jpg" />
            <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
          </figure>
        </div>

根据计算，我在幻灯片div中添加一些CSS来定位控件。

但是，如果我在页面上有更多的幻灯片显示，都有一个＆＃34;幻灯片＆＃34;，那么图像的宽度和高度只取自第一张幻灯片中的第一张图片。

如何循环播放幻灯片，获取每张图像的第一张图像的图像高度和宽度，然后分别为每张图像设置控件的位置？

我尝试做这样的事情来获得每个的高度，但它返回null：

  var imageHeight = $(".slideshow img").first().height();
  var imageWidth = $(".slideshow img").first().width();

Answer 1

您可以浏览＆＃34;幻灯片＆＃34;容器：

$(".slideshow").each(function() {
  var container = this;
  var imageHeight = $(container).find("img").first().height();
  var imageWidth = $(container).find("img").first().width();
  // ... do stuff ...
});

在.each()回调中，this将是容器DOM元素。

具有相同类名的Div：选择第一个子项并为每个设置不同的CSS样式

1 个答案: