title: Carousel - How to loop through elements?
body: <p>I'm trying to figure out how to loop through each list element one at a time and apply a function to them when they run, I've tried several methods and some hints would help!</p>
  
  <p>HTML structure</p>
  
  <pre><code>&lt;div class="custom-item"&gt;
    &lt;ul&gt;
      &lt;li id="first-slide" class="slide active"&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/li&gt;
      &lt;li id="second-slide" class="slide"&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/li&gt;
      &lt;li id="third-slide" class="slide"&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've worked out an <code>each</code> function that if i understand correctly will handle the changing of classes, this is where I'm failing to loop through each element.</p>
  
  <pre><code>$(document).ready(function() {
    $( ".slide" ).each(function( i ) {
      if ( this.className !== "active" ) {
        this.addClass("active");
      } else {
        this.removeClass("active");
      }
    });
  });
  </code></pre>