Applying rainbow text to all text in class

Question

I've found a really nice rainbow text animation that I like:
https://github.com/xoxco/Rainbow-Text

I'm trying to apply the effects of this to all text within a class.
<span class="rainbow">some text here...</span>

The problem is that if I have two different pieces of text on a page:

<span class="rainbow">Text #1</span>
<span class="rainbow">Text #2</span>

The rainbow affect applies to both pieces of text but the text contents of each span changes to Text #2.

The text isn't static on the page so I can't use id.

Is there a way I can change the class (or id) of each rainbow text span to rainbow-1, rainbow-2 etc and have the javascript code execute on each span independently? Maybe a loop that iterates over id's beginning with rainbow- and applies the effect to it independently?

Answer 1

You suspected correctly. By using jQuery's .each over the .rainbow elements, the text displays properly.

Here is the working code

$('.rainbow').each(function() {
  $(this).rainbow({
    colors: [
      '#FF0000',
      '#f26522',
      '#fff200',
      '#00a651',
      '#28abe2',
      '#2e3192',
      '#6868ff'
    ],
    animate: true,
    animateInterval: 100,
    pad: false,
    pauseLength: 100
  });
});

Here's a GIF of it in action!