Find Next Element

Who's next?

by pilafmon

HTML

<h1>Click the Red Hot Button</h1>
<ul>
   <li>a) <button class=hot>Next</button></li>
   <li>b) <button>Next</button></li>
</ul>
c) <button>Next</button>
<ul>
   <li>
      Sublist:
      <ol>
         <li>d) <button>Next</button></li>
         <li>e) <button>Next</button></li>
      </ol>
   </li>
   <li>
      [f) <button>Next</button> g) <button>Next</button>]
   </li>
   <li>h) <button>Next</button></li>
</ul>

CSS

body {
   font-family: system-ui, sans-serif;
   background-color: skyblue;
   }
button {
   font-weight: bold;
   cursor: pointer;
   transition: 500ms all;
   }
button.hot {
   color: firebrick;
   }

JavaScript

// https://stackoverflow.com/a/43385738
// Who's next?

const next = (event) => {
   const list =   $('button');                  //all buttons
   const index =  list.index($(event.target));  //current button
   const target = (index + 1) % list.length;    //increment with wrap
   list.removeClass('hot').eq(target).addClass('hot');
   };
   
$('button').click(next);