Question

我有4个带有display: block; width: 100%;的子横幅，每个横幅都有一个带文字的div。这些div使用transform: translateY(238px)在父元素外部挂起。

保存文本的每个div都有不同的高度，因此我试图编写一个函数来检查每个文本div的高度，并相应地将边距应用于该特定父元素的底部。

到目前为止我得到的是这个，但是我无法弄清楚如何将变量respectiveMargin传递到我的第二个函数中，以便它与正确的父元素匹配。现在它只是在所有子横幅上应用相同的边距。感谢您的帮助！

const resize = () => {

  if ($(window).width() < 768) {
    $('.sub-banner-text-wrapper').each(function () {
      var textHeight = $(this).height();
      var responiveMargin = (textHeight - 62) + 25;
    });

    $('.sub-banner').each(function () {
        $(this).css("margin-bottom", responiveMargin);
    });
  }

};
$(window).on('resize', resize);

Answer 1

似乎主要问题是您只需要使用两个.each es：

const resize = () => {

  if ($(window).width() < 768) {
    $('.sub-banner-text-wrapper').each(function () {
      var textHeight = $(this).height();
      var responiveMargin = (textHeight - 62) + 25;

      $(this).closest('.sub-banner').css("margin-bottom", responiveMargin);
    });
  }

};
$(window).on('resize', resize);

Answer 2

因此，当你遍历一组时，引用索引。

var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
  var textHeight = $(this).height();
  var responiveMargin = (textHeight - 62) + 25;
  banners.eq(ind).css("margin-bottom", responiveMargin);
});

如果它恰好是一个子/父元素，那么你可以选择它。

var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
  var textHeight = $(this).height();
  var responiveMargin = (textHeight - 62) + 25;
  //If a child
  $(this).find(".sub-banner").css("margin-bottom", responiveMargin);
  //or a parent
  $(this).parent().css("margin-bottom", responiveMargin);
});

Answer 3

也许是这样的？

if ($(window).width() < 768) {
        $('.sub-banner-text-wrapper').each(function () {
          var subBanner = $(this).closest('.sub-banner').attr('class');
          var textHeight = $(this).height();
          var responiveMargin = (textHeight - 62) + 25;
          $(subBanner).css("margin-bottom", responiveMargin);
        });
    }

从一个.each函数获取值到另一个.each函数

3 个答案: