javascript - Applying rainbow text to all text in class - Stack Overflow

I've found a really nice rainbow text animation that I like:

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?

I've found a really nice rainbow text animation that I like:
https://github./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?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 1, 2016 at 18:40 Mo BeigiMo Beigi 1,77555 gold badges3030 silver badges5252 bronze badges 1

• Can you create a JSFiddle so we can see the code run? – Seano666 Commented Feb 1, 2016 at 18:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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!

Sure, looks like the plugin expects you only declare one element at once.

You can put it inside an each loop, have your callback use an i variable to represent the current index, and use $(this) to instantiate it for each item with the class.

The end result will include your .rainbow-1, .rainbow-2, etc. classes as well.

$('.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/ajVzR/683/

you can use jQuery "each" for solving your problem, like bellow

<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']});
    });

You can work around this like this:

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

demo