★゜・。。・゜゜・。。・゜☆ 2011年10月19日 ☆゜・。。・゜゜・。。・゜★
jQueryのindex()でつまずいたこと
jQueryのindex()メソッドで、些細なことで苦労したのでメモです。
クリックされたエレメントが何番目か？を取得するには、例えばこんな感じで index() を使えば良いのですが、
今回はまったのは、
というスクリプトを書いているとき。
表示させるタブに「on」というクラスを与えて、それが何番目にあたるかを読んで表示・非表示を切り替えようとしたのですが、
その、「何番目か」がなかな取得できませんでした。
結論として、以下のソースでできたのですが、
何がまずかったのかというと、
とすべきところを
としていたからでした。
add() などは $() で囲まなくてもＯＫですが、index() はそれではダメだということです。
クリックされたエレメントが何番目か？を取得するには、例えばこんな感じで index() を使えば良いのですが、
<script type="text/javascript">
$(function(){
$("#sample01_20111019 li").click(function(){
var index=$("#sample01_20111019 li").index(this)+1;
$("#sample01_20111019 span").text(index);
$("#sample01_20111019 em").text($(this).text());
});
});
</script>
<div id="sample01_20111019">
<h3>好きな果物をクリックしてください。</h3>
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>マンゴー</li>
<li>ブドウ</li>
<li>ミカン</li>
</ul>
<p>あなたの好きな果物は、<span>▲</span>番目の<em>●●</em></p>
</div>
（サンプル１）
好きな果物をクリックしてください。
- リンゴ
- バナナ
- マンゴー
- ブドウ
- ミカン
あなたの好きな果物は、▲番目の●●
今回はまったのは、
「ｎ番目のタブ（li）をクリックしたら、ｎ番目のパネル（div）を表示させる」
というスクリプトを書いているとき。
表示させるタブに「on」というクラスを与えて、それが何番目にあたるかを読んで表示・非表示を切り替えようとしたのですが、
その、「何番目か」がなかな取得できませんでした。
結論として、以下のソースでできたのですが、
<script style="text/javascript">
$(function(){
showPanel();
$("#sample02_20111019 li").click(function(){
$("#sample02_20111019 li").removeClass("on");
$(this).addClass("on");
showPanel();
});
});
function showPanel(){
var index=$("#sample02_20111019 li").index($(".on"))
$("#sample02_20111019>div").css("display","none");
$("#sample02_20111019>div").eq(index).css("display","block");
}
</script>
<style type="text/css">
#sample02_20111019 li {
float:left;
list-style-type:none;
border:1px solid #000;
border-bottom:none;
margin-right:5px;
padding:5px;
position:relative;
z-index:1;
background:#fff;
}
#sample02_20111019 li.on {
z-index:2;
background:#fef;
}
#sample02_20111019 div {
clear:both;
padding:1em;
border:1px solid #000;
position:relative;
top:-1px;
z-index:1;
background:#fef;
}
</style>
<div id="sample02_20111019">
<ul>
<li>リンゴ</li>
<li class="on">バナナ</li>
<li>マンゴー</li>
<li>ブドウ</li>
<li>ミカン</li>
</ul>
<div>
リンゴは美味い
</div>
<div>
バナナは美味い
</div>
<div>
マンゴーは美味い
</div>
<div>
ブドウは美味い
</div>
<div>
ミカンは美味い
</div>
</div>
（サンプル２）
- リンゴ
- バナナ
- マンゴー
- ブドウ
- ミカン
リンゴは美味い
バナナは美味い
マンゴーは美味い
ブドウは美味い
ミカンは美味い
何がまずかったのかというと、
.index($(".on"))とすべきところを
.index(".on")としていたからでした。
add() などは $() で囲まなくてもＯＫですが、index() はそれではダメだということです。
ボタンを押して、
