jQuery rel attribute

Question

We have many links with rel attributes:

<div class="team-tags">
 <a class="s1" rel="t1 t2 t3" href="#">One</a>
 <a class="s2" rel="t2 t3" href="#">Two</a>
 <a class="s3" rel="t1" href="#">Three</a>
 <a class="s4" rel="t4 t6" ref="#">Four</a>
 <a class="s5" rel="t2 t5" href="#">Five</a>
</div>

And one ul:

<ul class="team">
 <li class="t1">Some text</li>
 <li class="t2">Some text</li>
 <li class="t3">Some text</li>
 <li class="t4">Some text</li>
 <li class="t5">Some text</li>
 <li class="t6">Some text</li>
</ul>

rel of each link can have multiple values (like class="value1 value2 value3 value4"). Each value is used to mark similar class of <li>.

rel="t2 t3" marks <li class="t2">Some text</li> and <li class="t3">Some text</li>. And so on.

The main idea - when we hover any of these links, script should find lis with similar class inside .team list and toggle active class for them.

For example, if we hover link with rel="t4 t6", script should toggle class active for <li class="t4">Some text</li> and <li class="t6">Some text</li>, like <li class="t4 active">Some text</li> and <li class="t6 active">Some text</li>.

jQuery 1.3.2 is used.

Any idea?

Thanks.

Answer 1

Like this:

function getTeams(elem) {
    return $('.' + elem.rel.replace(' ', ', .'));
}
$('.team-tags a[rel]').hover(
    function() { getTeams(this).addClass('active'); },
    function() { getTeams(this).removeClass('active'); }
);

Demo