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

Question

我正在创建一个幻灯片，我使用 JS 来设置控件的位置。为此，我获取第一张图像的高度和宽度以进行计算。

HTML：

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

JS：

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

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

但是，如果我在页面上有多个幻灯片，都具有“幻灯片”类，则图像宽度和高度仅取自第一个幻灯片中的第一个图像。

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

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

$(".slideshow").each(function() {
    var imageHeight = $(this).find('.slideshow-inner:first-child').outerHeight();
    console.log(imageHeight);
    });

Answer 1

您可以遍历“幻灯片”容器：

$(".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 元素。