TAGjQuery
jQueryで別々のリストを連動させて処理
jQueryで別々のリストを連動させて処理する方法をメモ
例えば
<ul class="list1"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="list2"> <li>ここをクリックかマウスオーバー等で.list1の1を処理</li> <li>ここをクリックかマウスオーバー等で.list1の2を処理</li> <li>ここをクリックかマウスオーバー等で.list1の3を処理</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を用意すれば、
マウスオーバーされた別のリストの同じ個所の背景が変更されます。