Get values from one .each function into a different .each function

Question

I have 4 sub-banners with display: block; width: 100%; that each have a div with text inside. These divs hangs down outside the parent element using transform: translateY(238px).

Each div that holds the text is of varying height so I was trying to write a function to check each text div's height and apply the margin to the bottom of that specific parent element accordingly.

What I got so far is this, but I can't figure out how to get the variable respectiveMargin passed into my second each function so that it matches up with the right parent element. Right now it just applies the same margin on all sub-banners. Thanks for any and all help!

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

What is the objective? Reading between the lines, you are trying to make all sub-banners have the same vertical height by adding a variable amount of margin. Is that correct? — Roamer-1888
– Roamer-1888, Commented Nov 3, 2017 at 19:22

JLRishe · Accepted Answer · 2017-11-03 18:51:25Z

2

Seems the main problem is that you're trying to use two .eaches when you only need one:

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

answered Nov 3, 2017 at 18:51

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JLRishe Over a year ago

Looks like there's a silent downvote bandit on the loose.

epascarello Over a year ago

Jealous of our answers ;)

acaputo Over a year ago

looks like we all posted almost the exact answer at the exact same time lol

gBasgaard Over a year ago

Thank you so much! Cleared it up perfectly for me. I almost had it!

epascarello · Accepted Answer · 2017-11-03 18:51:03Z

0

So reference the index when you loop over the one set.

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

If it happens to be a child/parent element, than you can just select it.

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

answered Nov 3, 2017 at 18:51

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

acaputo · Accepted Answer · 2017-11-03 19:14:23Z

0

Maybe Something like this?

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

edited Nov 3, 2017 at 19:14

answered Nov 3, 2017 at 18:51

acaputo

3001 silver badge13 bronze badges

Collectives™ on Stack Overflow

Get values from one .each function into a different .each function

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related