Question

My problem is getting the first tab_content to show on load.
my 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();
});

My HTML:

<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>

The problem started when I moved the ul class=”tabs” above gwrapper (Used to be above tab_container). I know the problem is the selector in this line:

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

I dont know how to jump divs and select. I’ve looked it up but I can’t piece it together. I dont know whether(or how) to use eq() in here.

Example can be found on jpatrolla.com (then click portfolio)

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();
    });
});

The .tabs element and the .tab_container element in your example HTML are siblings, so you can use .siblings() or .nextAll() to select them relatively from your .tabs element. The difference between .siblings() and .nextAll() is that the latter only looks for elements that come after the current selection and the former looks at all sibling elements.

Notice the usage of .eq(0) instead of :first, they do the same thing, select only the first element in the set, but using .eq() is faster since it doesn’t take mucking around with strings.

Here is a demo: http://jsfiddle.net/YbNJ2/

• Docs for .nextAll(): http://api.jquery.com/nextall

UPDATE

I normally like to help people optimize their code whenever possible and you can increase the performance of your loop by using either $.each() instead of $().each() or even better you can use a well formatted for loop:

$(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();
    }
});