jQueryでタブ切り替え

jQueryでタブ切り替えを行うため、以下のように設定しました。

$(function(){
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('non');
$(".content_wrap").eq(num).removeClass('non');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

<ul id="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
</ul>
<div class="content_wrap">タブ1の中身</div>
<div class="content_wrap non">タブ2の中身</div>

こちらは問題なく動作しました。
で、このhtmlのセットを複数設置したい要望がありまして、

<ul class="tab">
<li class="select">タブ1-1</li>
<li>タブ1-2</li>
</ul>
<div class="content_wrap">タブ1-1の中身</div>
<div class="content_wrap non">タブ1-2の中身</div>

<ul class="tab">
<li class="select">タブ2-1</li>
<li>タブ2-2</li>
</ul>
<div class="content_wrap">タブ2-1の中身</div>
<div class="content_wrap non">タブ2-2の中身</div>

・・・

としていきたいのですが、この場合のjQueryはどのように記述すればいいでしょうか。

$(".tab li").click(function() {
var numCont = $(".tab").index(this);
var num = $(".tab li").index(this);
numCont++;
$(".tab:nth-child("+ numCont +") li .content_wrap").addClass('non');
$(".tab:nth-child("+ numCont +") li .content_wrap").eq(num).removeClass('non');
$(".tab:nth-child("+ numCont +") li").removeClass('select');
$(".tab:nth-child("+ numCont +") li").addClass('select')
});

としてみたのですが、まず何番目のタブセットかを指定するnumContが取得できていません。
タブが選ばれた時に、選んだエリアと、選んだliを同時に取得する方法がわかりません。
thisを使ってもう少しうまい書き方があるような気もするのですが、何分経験不足なためにご指南頂けると幸いです。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/05/04 14:49

こんにちは。

確認できる環境にないので、イメージの回答になってしまいますが…

複数セットある場合は、各単位毎にdiv要素などで括っておくと処理がしやすくなります。
また、セット数が増減しても対応可能なように、文書構成を利用した相対的位置関係で処理するような記述をしておくと便利だと思います。
具体的には、まず、その(親)div要素を探して、後は、その要素の子孫要素だけを対象に操作するような記述にしておけば、そのセットだけを対象にすることができます。

さて、ご提示のHTMLのままで処理することももちろん可能です。
処理が少しだけ面倒かもしれませんが、

＞numContが取得できていません。
セットの順序は文書の中でのul.tabの順を得れば良いと思いますが、thisはli要素ですよね。
var numCont = $(".tab").index($(this).parent());
のようにすることで取得できると思います。

全体を改めて考えてみるなら、
$(".tab li").click(function() {
var ul = $(this).parent();
var idx = $(">li", ul).removeClass("select").index(this);
$(this).addClass("select");

var content = ul.next(".content_wrap");
for(var i = 0; i < $(">li", ul).length; i++){
if(i == idx) content.removeClass("non");
else content.addClass("non");
content = content.next(".content_wrap");
}
});

※ 実行を確認していませんのでタイポやミスがあるかもしれません。ご参考まで。

この回答へのお礼

一発で動きました！
ありがとうございました。
ちょっとわからない箇所もあるので頂いたコードを元に勉強していきたいと思います。

お礼日時：2016/05/06 11:10