Rainbow Effect not working correctly with A hrefs

Question

I have a code that I am trying to write for a website host, a member asked for some support. And I wrote this, and it works only for Text but with a hrefs it ruins the markup.

http://jsbin.com/izebej/1/edit

code:

  $.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function() {
      var selectMe= ["u1","u2"];
   for(var i =0;i<selectMe.length;i++){
     $('.username').find('a[href*='+selectMe[i]+']').addClass('selected');
    }
   $('.selected').text(function() {
        $(this).rainbow({
    colors: [
      '#FF0000',
      '#f26522',
      '#fff200',
      '#00a651',
      '#28abe2',
      '#2e3192',
      '#6868ff'
     ],
      animate:true,
      animateInterval:100,
      pad:false,
      pauseLength:100
       });
     });
   });

The markup is in the JSBIN- You can clearly see what is happening. I've tried many different ways. Also if you look at the markup I clearly marked the href for the last one to be u21, seeing as the object I wrote u1 and u2. Combining them to see if it is only looking for anything with 1 or 2 in it. In the for loop you see I do a[href*='+selectMe[i]+' I've changed it to a[href='selectMe[i]' as well as a[href="'+selectMe[i]+'" yet those do not work.

Any suggestions?

Answer 1

@EasyBB I tried to see it, but could saw no problem rainbow effect I could see it everywhere...

If you mean that and strong should not be seen in Rainbow... but only text inside span... then its the way the plugin works.

If you see the plug in code...

if (chars[x]!=' ') {
     newstr = newstr + '<span style="color: ' + options.colors[counter] + ';">' + chars[x] + '</span>';
     counter++;
} else {
    newstr = newstr + ' ';

}

What they do is they break the HTML content of the element and apply colors to them by adding it into SPAN...

so <span> TEST </span> becomes <span color="x"> < </span><span color="x"> S </span> and so on so it don`t remain as as a HTML mark up but simple text...

I think your best bet is to find the elements which are direct parents of text something like

DEMO

$.getScript("http://xoxco.com/projects/code/rainbow/rainbow.js",function() {
var selectMe= ["u1","u2"];
for(var i =0;i<selectMe.length;i++){
$('.username').find('a[href*="'+selectMe[i]+'"]').addClass('selected');
}
  $('.selected').find('*').andSelf().contents().filter(function(){
   return this.nodeType===3;
  }).parent().text(function() {
    $(this).rainbow({
  colors: [
  '#FF0000',
  '#f26522',
  '#fff200',
  '#00a651',
  '#28abe2',
  '#2e3192',
  '#6868ff'
  ],
animate:true,
animateInterval:100,
pad:false,
pauseLength:100
});
});
});