jQuery replace doesn't work

Question

Script replaces rel attributes to class.

Full code - http://jsbin.com/efozi3/8/

It doesn't work for links, where used more than 2 values in rel.

An example - the first item:

<a class="s1" rel="t1 t2 t3" href="#">One</a>

First three <li> should become blue, but now only the first one does.

 <li class="t1">
 <strong>1</strong>
 </li>
 <li class="t2">
 <strong>2</strong>
 </li>
 <li class="t3">
 <strong>3</strong>
 </li>

This line doesn't work as expected (supports maximum 2 values in rel):

return $('.' + elem.rel.replace(' ', ', .'));

You can edit code directly on http://jsbin.com/efozi3/8/edit/

Thanks.

• bobince: (Why do people keep abusing rel for this kind of thing? What did that poor attribute do to deserve it?)
• SLaks: @bobince: To validate, perhaps

Answer 1

Believe it or not, Javascript's replace function only replaces the first occurrence of the search text.
To replace every occurrence, you need to pass a regex with the g (Global) flag.

Change it to

return $('.' + elem.rel.replace(/\s+/g, ', .'));

• SLaks: Sorry; I forgot about this quirk in my previous answer.
• Koen: I guess there's no other way (except looping until string remains unchanged). Doesn't seem like cheating to me...
• SLaks: @Koen: That's not what he meant (I believe). I gave him his current code