Помогите с оптимизацией некоторых функций jQuery

Question

У меня есть простой jQuery, который добавляет некоторые функции вкладки. Это основано на том, что я где-то нашел (не могу вспомнить, где), но, вероятно, он в основном является оригинальным на данный момент. У меня были проблемы с некоторыми селекторами, поэтому мне пришлось делать некоторые вещи, которые казались неудобными (см. Раздел .children(). Children). Неловкие части связаны с добавлением способности обрабатывать несколько наборов вкладок на одной странице.

Возможно, я неправильно использовал селектор? И вы можете увидеть здесь какую-нибудь другую комнату для улучшения?

Вот JQuery:

// Create and manage tab blocks 
$('.tab-sections section').hide(); // Hide all tabs 
$('.tab-list').each(function(){ // Make the first tab active 
    $('.tab-list li:first-child').addClass('active'); 
}); 
$('.tab-sections').each(function(){ // Make the first tab's content visible 
    $('.tab-sections section:first-child').show(); 
}); 
$('.tab-list li').click(function() { 
    $(this).siblings().removeClass('active'); // Remove any "active" class 
    $(this).addClass('active'); // Add "active" class to selected tab 
    // Hide tabs. This looks awkward, but .children('.tab-sections section') wouldn't work 
    $(this).parents('.tab-block').children('.tab-sections').children('section').hide(); 
    // Find the href attribute value to identify the active tab + content 
    var activeTab = $(this).find('a').attr('href'); 
    $(activeTab).fadeIn('fast'); // Fade in the active ID content 
    return false; 
}); 

Вот HTML:

<div class="tab-block grad-tabs"> 
<ul class="tab-list"> 
    <li><a href="#tab1" title="tab 1">Tab 1</a></li> 
    <li><a href="#tab2" title="tab 2">Tab 2</a></li> 
    <li><a href="tab3" title="tab 3">Tab 3</a></li> 
</ul> 
<div class="tab-sections"> 
    <section id="tab1"> 
     <h2>Tab 1</h2> 
     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </section> 
    <section id="tab2"> 
     <h2>Tab 2</h2> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </section> 
    <section id="tab3"> 
     <h2>Tab 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </section> 
</div> 
</div> 

Answer 1

Вы можете сделать еще несколько улучшений, для основного вопроса, вы можете использовать .find() решить .children() проблемы, вместо того, чтобы из этого:

$(this).parents('.tab-block').children('.tab-sections').children('section').hide(); 

Перейти к .tab-block с помощью .closest() то .find(), что вы хотите внутри, как это:

$(this).closest('.tab-block').find('.tab-sections section').hide(); 

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

$('.tab-sections section:not(:first-child)').hide(); // Hide all content that not the first 
$('.tab-list li:first-child').addClass('active'); 
$('.tab-list li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); // Add "active" class to selected tab, remove any other "active" class 
    $(this).closest('.tab-block').find('.tab-sections section').hide(); // Hide tabs. 
    var activeTab = $(this).find('a').attr('href'); // Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn('fast');     // Fade in the active ID content 
    return false; 
}); 

Если вы на JQuery 1.4.1+ вы можете еще больше оптимизировать это с .delegate(), изменением этого:

$('.tab-list li').click(function() { 

К этому:

$('.tab-list').delegate('li', 'click', function() { 

Это придает одинclick обработчик каждого .tab-list элемента, а не по одному на <li>.

Answer 2

Вы можете заинтересованы в этом

var sections = $('.tab-sections section'); 

sections.hide(); 

$('.tab-list li:first-child').addClass('active'); 

$('.tab-sections section:first-child').show(); 

$('.tab-list').delegate("li", "click", function() { 

    $(this).addClass('active').siblings().removeClass('active'); 

    sections.hide(); 

    var activeTab = $(this).children('a').attr('href'); 
    $(activeTab).fadeIn('fast'); 

}); 

Здесь я кэшируюсь секции, так как он используется несколько раз во время действия страницы.

Опять же используется метод jquery delegate вместо добавления события 1 click для каждого из элементов 3 li.

Вы можете найти рабочий образец here, но я думаю, вы также можете посмотреть this.