Question

I have two lists:

<ul id="list1">
   <li class="link1">Link 1</li>
   <li class="link2">Link 2</li>
   <li class="link3">Link 3</li>
</ul>

<ul id="list2">
   <li class="link1">Link 1</li>
   <li class="link2">Link 2</li>
   <li class="link3">Link 3</li>
</ul>

I want when I hover “link1” from “list1” to add a class (.active) to “link1” from “list2”. And same for “list2″… It is possible to make a function, because I have lot of li with same classes, and will be too bad to do it manually for each.

Answer 1

Try this:

$("#list1 li,#list2 li").hover(function() {
    var index =  $(this).index();
    $("#list1, #list2").each(function() {
         $("li",this).eq(index).toggleClass("active");
    });
});

jsFiddle