Looping through unordered list to add and remove classes

Question

I am trying to iterate through an unordered list and loop through each list item (with the class of ticker-item ) and temporarily append a class to it so that CSS can apply some transitions to it).

var a = [];
$(".ticker-item").each(function(index) {
  a[index] = $(this);
  setTimeout(function() {
    a[index].addClass('current').delay(500).queue(function(next) {
      a[index].removeClass('current');
      next();
    });
  }, index * 500);
});

I've searched through various SO articles, and I'm confident that the function will add and remove the classes correctly, but it doesn't currently seem to be applying the li's?

And here is the HTML:

      <div class="ticker">
        <ul class="ticker-items">
            <li class="ticker-item">
                <a href="/categories/featured/summer-sale/1185">
                    <p><strong>Summer Sale</strong>🍦 Now more things at <strong>50% off!</strong></p>
                </a>
            </li>
            <li class="ticker-item">
                <a href="/about">
                    <p>Things for kids you'll 💗 too. <strong>Our story</strong></p>
                </a>
            </li>
            <li class="ticker-item">
                <a href="/help/delivery-and-returns">
                    <p><strong>Free</strong> Delivery* &amp; <strong>Free</strong> Returns 📦</p>
                </a>
            </li>
        </ul>
    </div>

Answer 1

You do not loop through elements with the class ticker-item , you loop through elements that are like this: <ticker-item> ... </ticker-item>

To change your loop you have to use the class-selecter:

$(".ticker-item").each

Answer 2

you are not accessing by class name,

change $("ticker-item").each to $(".ticker-item").each (class selector)

Answer 3

The addClass nor removeClass are using the queue by definition. So jQuery#delay will have no effect on these methods.

The solution is to execute both of them into queued callbacks in order for them to be pushed into the queue, like the following:

 setTimeout(() => { $('#noqueue') .addClass('colored') .delay(2000) .removeClass('colored'); $('#queue') .queue(function(next) { $(this).addClass('colored'); next(); }) .delay(2000) .queue(function() { $(this).removeClass('colored'); }); }, 1000); 

 div { transition: color .5s; } .colored { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="noqueue">no queue</div> <div id="queue">with queue</div> 

And I made a example below to chaining your animation.

Note that I didn't use setTimeout but I only used jQuery#delay , as I find that's cleaner.

Also, don't forget to dequeue your animations if you want to reexecute them without refreshing your page.

 $('button').on('click', () => { $('ul > li').each((i, li) => { $(li) .delay(500 * (i + 1)) .queue(next => { $(li).addClass('colored'); next(); }) .delay(750) .queue(() => ($(li).removeClass('colored'), $(li).dequeue())); }); }); 

 ul > li { transition: color 1s; } .colored { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <button>Color them!</button>