Помогите с оптимизацией некоторых функционирующих 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()* обработчик 1025 *, например:

$('.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 делегат метод используется вместо добавления 1 события клика к каждому из 3 li элементов.

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