Repeating loop through list elements that adds a class to each with javascript

Question

I have a UL containing list elements. I need to create an effect that highlights each list item in order and changes their background colour.

This is just a highlight affect that will add / remove a class every second and move along the list.

Basic html:

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    etc...
</ul>

I am currently stuck at this:

var ul = document.getElementById("looping-list");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {

}

Thanks. If required I can alter the html of the list to give an id to each of the elements or a data attribute as they are coming from a PHP for loop.

No jQuery on this one too.

T.J. Crowder · Accepted Answer · 2016-05-19 15:38:08Z

You can't do it with for because you need to yield back to the browser for that second between changes. But other than that, you're on the right sort of track.

Here's an example using setTimeout. I've assumed you want to keep looping through them, going back to the beginning when you reach the end. This version also happily adjusts to changes in the list, if you add/remove items dynamically.

// Strict mode helps us avoid errors like The Horror of Implicit Globals
"use strict";

// A scoping function to avoid creating global variables
(function() {
  // An index we'll use to keep track of which element should be next.
  // We'll pre-increment it, so start with -1.
  var index = -1;

  // Start the process
  update();
  
  function update() {
    // Get the list
    var list = document.getElementById("looping-list");
    
    // Remove the old highlight, if any
    var item = list.querySelector("li.highlighted");
    if (item) {
      // There is, remove it
      item.classList.remove("highlighted");
    }
    
    // Move to the next, wrapping around if appropriate
    var items = list.querySelectorAll("li");
    index = (index + 1) % items.length;
    
    // Add the class
    items[index].classList.add("highlighted");
    
    // Schedule a callback after a second
    // Add an `if` here if there's a termination condition
    setTimeout(update, 1000);
  }
})();

.highlighted {
  color: blue;
}

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Note: This uses classList, which in the simple usage above is very well-supported in modern browsers and can be shimmed on older browsers (IE9 and earlier) if needed.

Luke P · Accepted Answer · 2016-05-19 15:32:16Z

0

If I understand you correctly, something like this:

var ul = document.getElementById("looping-list");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
  doSetTimeout(items[i], i);
}


function doSetTimeout(elm, i) {
  setTimeout(function() {
  	elm.style.backgroundColor = 'red';
  }, 200*i);
}

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

answered May 19, 2016 at 15:32

Luke P

7347 silver badges19 bronze badges

Collectives™ on Stack Overflow

Repeating loop through list elements that adds a class to each with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related