jQuery で特定の要素のインデックス番号を取得　~ツールチップ~

ツールチップを作成してロールオーバーが必要なときに、その要素がインデックスの何番目かを知る必要があったので調べてみた。

というのもツールチップを作成する場合に・・・例えばサイドメニューでのリンクにはツールチップはいらないけど特定の領域ではリンクをロールオーバーしたらツールチップを表示したいと
なったとき、ツールチップの要素とリンク要素のインデックスは同じになるだろうと思ってインデックスを知る必要があった。

index()メソッドで自分自身を引き渡す

タイトルの表現がいまいち伝わりづらいので下記を参考

例えばwrapper要素の中の「a」要素でロールオーバーしたときの「a」要素のインデックスを調べるには下記のようになる

var idx;
$("#wrapper a[rel='tool']").mouseover(function(){
　　　
	idx=$("#wrapper a[rel=tool]").index(this);		  
})

上記を見ていただくと「index(this)」をマウスオーオーバーしたa要素自身を引き渡している

上記の意味を翻訳すると「wrapper要素内のa要素のロールーオーバーした要素のインデックスを変数idxに代入する」

ツールチップを作成してみました

実行結果

上記との変更点として特定の要素内でのツールチップですが、もしかしたら全ての要素にツールチップを表示したくないことも考えるとa要素に「rel」属性をつける

var idx;
$("#wrapper a[rel='tool']").mouseover(function(){
　　　//wrapper要素内のrel属性toolが設定されているa要素を取得する
	idx=$("#wrapper a[rel=tool]").index(this);	  
})

上記のように設定すればrel属性の設定されたa要素数に対してのインデックス番号が取得できる

表示するツールチップの設定

表示させるツールチップはspanタグでくくり「tooltip」クラスを設定する

ポイントとしては最初は非表示にするために「display:none」にしてマウスに追従するために「position:absolute」を設定

span.tooltip{
display:none;
 width:200px; 
border:#CCC 2px dotted; 
background-color:#099; 
padding:5px; 
position:absolute; 
color:#FFF; 
line-height:1.4; 
font-size:12px;}

eq()メソッドで表示させるツールチップを指定する

毎度の方法でeqメソッドで取得したインデックスを引き渡して対応するツールチップを表示する

もちろんツールチップを表示するa要素とツールチップのインデックを合わせる必要があるのでa要素の直後にspanタグを挿入する

たんぱく質や糖こいつはたんぱく質に対してのツールチップ

上記のように設定した上で下記のようにjQueryを記述して対応するツールチップを表示・非表示する

var idx;
$("#wrapper a[rel='tool']").mouseover(function(){
	idx=$("#wrapper a[rel=tool]").index(this);

　　　　//eqメソッドにインデックス番号を引き渡す
	$("span.tooltip").eq(idx).fadeIn(500);			  
}).mouseout(function(){
	$("span.tooltip").fadeOut(500);	
})

マウスムーブでツールチップをマウスに追従させる

ロールオーバーしている間にマウスに追従させるには以前マウスの座標を取得した方法を利用すればいい。

ツールチップに関してはcssで「position:absolute」で絶対配置しているので「top」と「left」を更新すればいい。

$("#wrapper a[rel='tool']").mousemove(function(e){
var dx=e.clientX;　　//マウスのX座標
var dy=e.clientY;　 //マウスのY座標
$("span.tooltip").css({
　"top":dy+10+"px",　//マウスのY座標に10px分を足した位置に更新
　"left":dx+10+"px"　//マウスのX座標に10px分を足した位置に更新
});