Apply rainbow text to all text in a class

Question

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

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

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

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

The effect of the rainbow extends to both parts of the text, but the text content of each range changes to Text #2.

The text is not static on the page, so I cannot use it id.

Is there a way to change the class (or id) of each rainbow text to rainbow-1, rainbow-2etc. and execute javascript code on each pass independently? Maybe a loop that iterates over an id starting with rainbow-, and applies the effect to it independently?

Answer 1

You suspect that is correct. Using jQuery .eachover elements .rainbow, text is displayed correctly.

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!

Answer 2

Of course, it looks like the plugin expects you to declare one element immediately.

, i $(this) .

.rainbow-1, .rainbow-2 ...

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

http://jsfiddle.net/ajVzR/683/

Answer 3

you can use jQuery "everyone" to solve your problem, for example below.

<div class="foo">123456789</div>
<div class="foo">123456789</div>
<div class="foo">123456789</div>
<div class="foo">123456789</div>


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

Answer 4

You can get around this as follows:

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

demo