0
            var triggers = document.getElementsByClassName('trigger');
            for (x in triggers) {
              cur = triggers[x]
              if (cur.offsetHeight < 135) {
                console.log('hiding we');
                // prevents it from propagating to parentNode and changing it
                e.preventDefault();
                $(cur).find('.trigger-we').hide();
                console.log('icon should be hidden')
              }
              else {
                e.preventDefault();
                // $(cur).find('.trigger-icon').show();
                $(cur).find('.trigger-we').show();
              }
            }
          });

I have the following code for hiding a specific element inside a parent div depending on the height of the parent div when the window gets resized. There are multiple parent divs under the class "trigger" and I iterate through each of them (via the for loop) and check its offset height (display height) and if its less than some threshold, I hide a specific div child of that parent div, but they're not getting hidden, anyone know why?

HC300
  • 1
  • You should probably use a `for-of-loop`, instead of an `for-in-loop`. [Difference](https://stackoverflow.com/questions/29285897/what-is-the-difference-between-for-in-and-for-of-statements-in-jav) – Minding Dec 18 '20 at 00:51
  • Post the generated HTML. – react_or_angluar Dec 18 '20 at 01:03
  • the generated html is simply not affected by the change in parent div size, the child div does not get hidden when i adjust browser window size – HC300 Dec 18 '20 at 22:37
  • why a for-of-loop instead of for-in-loop? – HC300 Dec 18 '20 at 22:38

1 Answers1

0

ended up fixing my problem by iterating over each element in the class through a foreach function

(parentdiv-class).each(function () {code})
HC300
  • 1