CODEWITHSUNDEEP
javascriptjquery
Edgar
Edgar

Reputation: 927

Iterate If statement

I have 12 modals. I want to compare each modal's .modal__content height to the viewport height, and if a particular modal .modal__content height is < than vh addClass("center") to it else addClass("margin"), then go to the next modal - compare it, do the if statement and so on till the last modal.

Each modal has the same class .modal__content.

This is my if: 

  if ($(window).height() > $('.modal__content').actual('height')) {
    $('.modal__content').addClass("center");
  } else {
    $('.modal__content').addClass("margin");
  }

Example of a modal:

  <div class="modal" id="modal-3"> // each modal has it's own id
    <div class="modal__content">
      <h3>Heading</h3>
      <div>
        <p>Paragraph</p>
        <button class="md-close">close</button>
      </div>
    </div>
  </div>

Questions:

1) In which kind of loop should I place my if? Mb I don't need loop at all?

2) $('.modal__content').addClass("center"); - is implicit iteration how can I limit it only to a particular modal?

Upvotes: 0

Views: 42

Answers (1)

Tushar Gupta
Tushar Gupta

Reputation: 15913

You can try it like

$('.modal__content').each(function(){
 if ($(window).height() > $(this).actual('height')) {
    $(this).addClass("center");
  } else {
    $(this).addClass("margin");
  }
})

Upvotes: 1

Related Questions