JQueryはクラスの文字列のFIRSTに基づいて選択します

Question

私は小さなタブスクリプトの基礎である2つの要素を持っています。 Tab1ををクリックしたときに

タブヘッダ

<span class="Block1 inactive" id="Tab1">Label1</span> 
<span class="Block2 inactive" id="Tab2">Label2</span> 
<span class="Block3 inactive" id="Tab3">Label3</span> 

タブの内容そう

<div class="contents inactive" id="Block1 ">Stuff here</div> 
<div class="contents inactive" id="Block2 ">Stuff here</div> 
<div class="contents inactive" id="Block3 ">Stuff here</div> 

：様々な理由（インターネット発破6と呼ばれる）のために、私はこのようにそれを構築しなければなりませんでした私のスクリプトは "Block1"のクラスを取得し、一致するクラスまたはIDを持つdivを検索する必要があります。

しかし、複数のクラスのセットで最初のクラスを選択するにはどうすればよいですか？これらの線に沿って何かがありますか？これも可能ですか？スタック

var tabtoshow = $(this).attr('class':first); 
var tabtoshow = $(this).attr('class:first'); 
var tabtoshow = $(this).attr('class[0]'); 

...

ありがとう！

var tabtoshow = $(this).attr('class').split(' ')[0]; 

...クラスの相対的な順序は、一般的に任意の意義を運ぶために意図されていないので、私はそこにはないと思う。私はこれ以上きれいだ任意の解決策がないと思う

Answer 1

そのためのヘルパーです。

Answer 2

ヘッダーが番号と順序のdivと一致し、他の兄弟がない親の子である場合は、jQuery indexメソッドを使用できます。

var tabtoshow = $('.contents').eq($(this).index()); 

または

var tabtoshow = $('#Block' + ($(this).index() + 1)); 

（ここでtabtoshowはjQueryオブジェクトであることに注意してください。）

Answer 3

分割またはスペース

<span class="inactive" id="Tab1"><a href="#Block1">Label1</a></span> 

を心配することなく、これを行うためのわずかに異なる方法

次に表示する正しいdivを取得する

var tabtoshow = $(this).children('a').attr('href');