title: How can this script apply a class to all specified HTML elements, regardless of how many elements there are?
body: <p>In the following example, this script applies the class 'green' to all 'span' HTML elements randomly, and at a steady rate.</p>
  
  <pre><code>var items = $('span').get();
  var interval = setInterval(function() {
      var random_number = Math.floor(Math.random() * items.length);
      $(items[random_number]).addClass('green');
      items.splice(random_number, 1);
      if (items.length === 0) {
          clearInterval(interval);
        }
       }, 10);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/DUbQB/" rel="nofollow">http://jsfiddle.net/DUbQB/</a></p>
  
  <p>I've updated it so that it changes 2 elements per interval, simply by calling the function twice.</p>
  
  <pre><code>var items = $('span').get();
  var interval = setInterval(function() {
  
      function rand(random_number) {
      var random_number = Math.floor(Math.random() * items.length);
      $(items[random_number]).addClass('green');
      items.splice(random_number, 1);
      }
  
      rand(1);
      rand(2);
  
      if (items.length === 0) {
          clearInterval(interval);
      }
  }, 500);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/DUbQB/3/" rel="nofollow">http://jsfiddle.net/DUbQB/3/</a></p>
  
  <p>All I want to know is, is there a way to get this script to randomly turn all elements green in the <strong>same time</strong>, regardless of how many elements there are?</p>
  
  <p>For example, <a href="http://jsfiddle.net/DUbQB/3/" rel="nofollow">http://jsfiddle.net/DUbQB/3/</a> completes in ten intervals because there's twenty elements and the random function is called twice. </p>
  
  <p>But if there were forty elements, the script would take twenty intervals, and so twice as long. How could this script always take the same amount of time to complete, regardless of how many elements there are?</p>