jQueryで別々のリストを連動させて処理 | KH-WEBLOG

jQueryで別々のリストを連動させて処理

jQueryで別々のリストを連動させて処理する方法をメモ

例えば

<ul class="list1">
<li>１</li>
<li>２</li>
<li>３</li>
</ul>
<ul class="list2">
<li>ここをクリックかマウスオーバー等で.list1の１を処理</li>
<li>ここをクリックかマウスオーバー等で.list1の２を処理</li>
<li>ここをクリックかマウスオーバー等で.list1の３を処理</li>
</ul>

のようなHTMLがあるときに

list2のliに対してマウスオーバーしたときにlist1の同じ番目のliに対してクラス(hover)を追加したい場合は

$(function(){
   $('.list2 li').mouseover(function(){
	   var index = $('.list2 li').index(this);
	   $(".list1 li").eq(index).toggleClass("hover");
   });
});
$(function(){
   $('.list2 li').mouseout(function(){
	   var index = $('.list2 li').index(this);
	   $(".list1 li").eq(index).toggleClass("hover");
   });
});

でOK

内容的には
var index = $(‘.list2 li’).index(this);
で現在何番目のリストが選択されているを取得し、
.eq(index)
で同じ番目を指定しています。

後は

.hover{
background:red;
}

等のようにcssを用意すれば、
マウスオーバーされた別のリストの同じ個所の背景が変更されます。