1つの.each関数から別の.each関数に値を取得します

Question

display: block; width: 100%;の4つのサブバナーがあり、それぞれにテキストのあるdivがあります。これらのdivはtransform: translateY(238px)を使用して親要素の外側にハングします。

テキストを保持する各divの高さが異なるため、各divの高さを確認し、その特定の親要素の下端に余白を適用する関数を作成しようとしていました。

私はこれまでこれを取得していましたが、右の親要素と一致するように変数respectiveMarginを第2の各関数に渡す方法を理解できません。今はすべてのサブバナーに同じマージンを適用するだけです。すべての助けをありがとう！

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

主な問題は、あなたが一つだけが必要なときに、2個の.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

だから、1セット以上のインデックスときにループを参照します。

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); 
     }); 
    }