jqueryセレクタが読み込まれない

Question

私の問題は、読み込み時に最初のtab_contentを表示することです。 私のjqueryの：

$(document).ready(function() { 

$(".tab_content").hide(); 
$("ul.tabs").each(function() { 
    $(this).find('li:first').addClass("active"); 
    $(this).next('.tab_container').find('.tab_content:first').show(); 
}); 

私のHTML：私は（tab_containerの上にするために使用）gwrapper上記ULクラス= "タブ" を移動したときに問題が開始

<ul class="tabs"> 
    <li><a href="#tab1">web</a></li> 
    <li><a href="#tab2">graphics/print</a></li> 
    <li><a href="#tab4">img</a></li> 
</ul> 
<div class="gwrapper"> 
    <div id="gallery"> 
     <div id="image"></div> 
     <div id="description">Welcome to my portfolio. Click any link below.</div> 
    </div> 
</div> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     content 
    </div> 

。私は問題がこの行のセレクタであることを知っています：

$(this).next('.tab_container').find('.tab_content:first').show(); 

私はdivsをジャンプして選択する方法はわかりません。私はそれを見てきましたが、私は一緒にそれを作ることはできません。私はここでeq（）を使用するかどうかを知りません。

例は、（その後、ポートフォリオをクリック）jpatrolla.comで見つけることができ

Answer 1

$(function() { 
    $(".tab_content").hide(); 
    $(".tabs").each(function() { 
     $(this).find('li').eq(0).addClass("active"); 
     $(this).nextAll('.tab_container').children('.tab_content').eq(0).show(); 
    }); 
}); 

あなたの例HTMLで.tabs要素と.tab_container要素あなたは0123を使うことができるので、兄弟ですまたは.nextAll()を入力して、.tabs要素から相対的に選択してください。 .siblings()と.nextAll()の違いは、後者は現在の選択の後ろにある要素のみを検索し、前者はすべての兄弟要素を調べることです。

:firstの代わりに.eq(0)を使用していることに注意してください。同じことを行いますが、セットの最初の要素のみを選択しますが、.eq()を使用すると文字列の動きが速くなりません。ここで

はデモです：.nextAll()ためhttp://jsfiddle.net/YbNJ2/

• ドキュメント：http://api.jquery.com/nextall

UPDATE

私は通常、人々が自分のコード可能な限りを最適化し、向上させることができ助けたいですループのパフォーマンスは、$().each()の代わりに$.each()を使用するか、またはbあなたは一つだけに影響を与えたいときに）（.eachを使用している場合は

$(function() { 
    $(".tab_content").hide(); 
    var $tabs = $(".tabs"); 
    for (var i = 0, len = $tabs.length; i < len; i++) { 
     $tabs[i].find('li').eq(0).addClass("active"); 
     $tabs[i].nextAll('.tab_container').children('.tab_content').eq(0).show(); 
    } 
}); 

Answer 2

多分：

$(this).siblings('.tab_container').find('.tab_content:first').show(); 

または

$(this).nextAll('.tab_container').first().find('.tab_content:first').show(); 

Answer 3

：Etterのあなたがうまくフォーマットさforループを使用することができますか？

$(document).ready(function() { 
    $(".tab_content").hide(); 
    $('.tabs').find('li:first').addClass("active"); 
    $('.tab_container').find('.tab_content:first').show(); 
}); 

Answer 4

.next（）あなたはgwrapper上記ULクラス=「タブ」を移動した後、今そうではありません直後の兄弟と一致します。

次回使用する場合、これは動作するはずです、

$(this).next().next('.tab_container').find('.tab_content:first').show();