title: Using .addClass in a dynamic way
body: <p><strong>EDITED:</strong></p>
  
  <p>I'm using Jquery to display 1 message at a time, from multiple possible messages (could be just one, or two, or 3 or more), every 10 seconds - It will depend on whether certain conditions are being met for each <code>$i</code> item (I will have multiple items):</p>
  
  <pre><code>    &lt;div class="mszDivOuter"&gt;
                 &lt;?php if ($condition1[$i]==true) { ?&gt;
                    &lt;div class="mszDiv activeMsz"&gt;message 1&lt;/div&gt;
                 &lt;?php } else { } ?&gt; 
                 &lt;?php if ($condition2[$i]==true) { ?&gt;
                    &lt;div class="mszDiv deactiveMsz"&gt;message 2&lt;/div&gt;
                 &lt;?php } else { } ?&gt; 
                 &lt;?php if ($condition3[$i]==true) { ?&gt;
                    &lt;div class="mszDiv deactiveMsz"&gt;message 3&lt;/div&gt;
                 &lt;?php } else { } ?&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>jQuery(document).ready(function(){
  
      setInterval(function(){ 
          jQuery(".mszDivOuter").each(function(){
              var cnt = crActiveMsz = nextMszNum = 0; 
              cnt = $(this).children('.mszDiv').length;
              if(cnt &gt; 1){
                  crActiveMsz = $(this).children('.activeMsz').index();
                  nextMszNum = crActiveMsz + 2;
  
                  if(nextMszNum &gt; cnt){ nextMszNum = 1;}
  
                  $(this).children('.mszDiv').removeClass("activeMsz");
                  $(this).children('.mszDiv').addClass("deactiveMsz");
  
                  $(this).children('.mszDiv:nth-child('+nextMszNum+')').removeClass("deactiveMsz");
                  $(this).children('.mszDiv:nth-child('+nextMszNum+')').addClass("activeMsz");
              }
          });
      }, 10000);
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.mszDiv{ position:absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -0-transform: translateY(-50%); top:50%; -ms-transform: translateY(-50%); top:50%;}
   .activeMsz{ opacity:1;
   -webkit-animation: slide-down 1s linear ;
      -moz-animation: slide-down 1s linear ;
      -o-animation: slide-down 1s linear ;
      -ms-animation: slide-down 1s linear ;
      animation: slide-down 1s linear ;
   }
   .deactiveMsz{ opacity:0;}
  </code></pre>
  
  <p>The problem:</p>
  
  <p>When the first message doesn't have <code>activMsz</code> class, it will remain blank for the first 10 seconds, and only then will start toggling between other messages.</p>
  
  <p>To avoid the waiting time, I tried using a different JS code:</p>
  
  <pre><code>jQuery(document).ready(function(){
    switchMsg();
    setInterval(switchMsg, 10000);
  });
  
  function switchMsg() {
      jQuery(".mszDivOuter").each(function(){
          var cnt = crActiveMsz = nextMszNum = 0; 
          cnt = $(this).children('.mszDiv').length;
          if(cnt &gt; 1){
              crActiveMsz = $(this).children('.activeMsz').index();
              nextMszNum = crActiveMsz + 2;
  
              if(nextMszNum &gt; cnt){ nextMszNum = 1;}
  
              $(this).children('.mszDiv').removeClass("activeMsz");
              $(this).children('.mszDiv').addClass("deactiveMsz");
  
              $(this).children('.mszDiv:nth-child('+nextMszNum+')').removeClass("deactiveMsz");
              $(this).children('.mszDiv:nth-child('+nextMszNum+')').addClass("activeMsz");
          }
      });
  }
  </code></pre>
  
  <p>But with this code, in some cases some of the messages simply will not show up at all.</p>
  
  <p>How to modify the code in order to show all possible messages, with no waiting, in each of the above HTML scenarios?</p>
  
  <p>Edit 2:</p>
  
  <p><strong>Desired behaviour:</strong>
  the first message from the HTML block (message 1, if it is included. message 2, if 1 is excluded by PHP, or message 3, if 1+2 are exluded by PHP). should show right away on screen, with no delay. then, they should switch to the next message after 10 seconds, if another message exists. if no </p>