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:

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

Проблема началась, когда я переместил ul class = "tabs" над gwrapper (раньше был над tab_container). Я знаю, что проблема заключается в селекторе в этой строке:

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

Я не знаю, как прыгать и выбирать дивы. Я искал это, но я не могу собрать это воедино. Я не знаю, нужно ли (или как) использовать eq () здесь.

Пример можно найти на jpatrolla.com (затем нажмите портфолио)

Answer 1

Может быть:

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

или

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

Answer 2

.next () соответствует непосредственно следующему брату, что не имеет место сейчас, после того как вы переместили ul class = "tabs" над gwrapper.

Если вы хотите использовать следующий, это должно работать,

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

Answer 3

Когда вы используете .each (), когда хотите повлиять только на одну вещь?

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

Answer 4

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

Элемент .tabs и элемент .tab_container в вашем примере HTML являются братьями и сестрами, поэтому вы можете использовать .siblings() или .nextAll() для их выбора относительно элемента .tabs.Разница между .siblings() и .nextAll() заключается в том, что последний ищет только элементы, которые идут после текущего выделения, а первый просматривает все родственные элементы.

Обратите внимание на использование .eq(0) вместо :first, они делают то же самое, выбирают только первый элемент в наборе, но использование .eq() быстрее, так как это не требует обдумывания со строками.

Вот демонстрация: http://jsfiddle.net/YbNJ2/

• Документы для .nextAll(): http://api.jquery.com/nextall

ОБНОВЛЕНИЕ

Обычно я люблю помогать людям оптимизировать их код всякий раз, когда это возможнои вы можете увеличить производительность вашего цикла, используя $.each() вместо $().each() или, что еще лучше, вы можете использовать хорошо отформатированный цикл for:

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