div nth-childを取得

Question

divのnth-childをjqueryで取得しようとしていたので、タブと同じように別のコンテンツを表示できますが、セレクタは機能しません。私は以下のコードを扱います。

これは、タブ用のコードです：私が欲しいのは、私が最初のタブをクリックするたびに、私が最初に表示されるよ」と言うのjQueryを持つことである

$("li, .tablink").click(function() { 
 

 
    var $this = $("li, .tablink") 
 

 
    if ($this.is(':nth-child(1)')) { 
 
    alert("1"); 
 
    } else { 
 
    alert("2"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabsContent"> 
 
    <ul> 
 
    <li class="tabLink active">tab1</li> 
 
    <li class="tabLink">tab2</li> 
 
    </ul> 
 
</div> 
 

 
<div class="content1"> 
 
    first content of the page 
 
</div> 
 
<div class="content2"> 
 
    second content of the page 
 
</div> 
 
<div class="content3"> 
 
    third content of the page 
 
</div>

そのページの内容など」

Ps：これは大きなプロジェクトで、プロジェクトのすべてのページにタブを含む同じHTMLファイルを使用する必要があるため、CSSだけではできませんもちろん、各ページにはタブとコンテンツの独自のセット

Answer 1

var $this = $("li, .tablink")が間違っています。あなたはthisをjQueryオブジェクトに渡すだけでいいです：$(this)。

$("li, .tablink").click(function(){ 
 
     if ($(this).is(':nth-child(1)')) { 
 
      alert("1"); 
 
     } else { 
 
      alert("2"); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabsContent"> 
 
    <ul> 
 
    <li class="tabLink active">tab1</li> 
 
    <li class="tabLink">tab2</li> 
 
    </ul> 
 
</div> 
 

 
    <div class="content1"> 
 
     first content of the page 
 
    </div> 
 
    <div class="content2"> 
 
     second content of the page 
 
    </div> 
 
<div class="content3"> 
 
     third content of the page 
 
    </div>

しかし、私はあなたが何をしようとして理解していれば、あなただけのインデックス取得方がいいでしょう：

$("li, .tablink").click(function(){ 
 
     alert($(this).index() + 1); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabsContent"> 
 
    <ul> 
 
    <li class="tabLink active">tab1</li> 
 
    <li class="tabLink">tab2</li> 
 
    </ul> 
 
</div> 
 

 
    <div class="content1"> 
 
     first content of the page 
 
    </div> 
 
    <div class="content2"> 
 
     second content of the page 
 
    </div> 
 
<div class="content3"> 
 
     third content of the page 
 
    </div>

Answer 2

と仮定しタブとコンテンツの順序付けはインデックス作成と同じです。

も文字通り、この正確な答えを持っていた、すべてのコンテンツ

$("li.tabLink").click(function() { 
 
    // $(this).index() gets index of current <li> within it's siblings 
 
    // eq() returns content with same index 
 
    $('.content').hide().eq($(this).index()).show(); 
 
});

.content{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabsContent"> 
 
    <ul> 
 
    <li class="tabLink active">tab1</li> 
 
    <li class="tabLink">tab2</li> 
 
    <li class="tabLink">tab3</li> 
 
    </ul> 
 
</div> 
 

 

 

 
<div class="content"> 
 
    first content of the page 
 
</div> 
 
<div class="content"> 
 
    second content of the page 
 
</div> 
 
<div class="content"> 
 
    third content of the page 
 
</div>