skrollr plugin to convert colors

Question

I'm trying to write a plugin for skrollr to allow transitions between different kinds of colors annotations.

This is the code at the moment:

http://jsfiddle.net/nL75k/

It should run before skrollr and convert every color annotation to HSLA.

I don't understand why the console gives me 3 times the same results:

background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117

It should be:

background-color:hsla(56,100,50,  1); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 0.5); fiddle.jshell.net/nL75k/show/:117
background-color:hsla(0,100,50, 1); fiddle.jshell.net/nL75k/show/:117

Any idea?

Answer 1

In getAllDataElements you are iterating over all elements and then over all attributes. But for each data attribute you're adding the elements to matches. The div has three data attribute, which causes it to be added three times.

Simple fix: break the loop

//check if attibute name starts with "data-"
if (attr.indexOf("data-") == 0) {
    matches.push(element); //add it to matches
    break;
}