Как упростить код jQuery ($) .each

Question

Я новичок здесь и только начинаю узнавать о javascript/jQuery, у меня есть некоторые коды, которые я сделал, но я думаю, что это не эффективные, это слишком долго и любопытно повторять Вы, ребята, могли бы сделать более простую версию этого кода? Спасибо.

Здесь я придаю HTML файл:

 var sections = $('.section-page'), 
      sp = $('.sp'), 
      sp2 = $('.sp2'), 
      sp3 = $('.sp3'); 

     $(window).on('scroll', function() { 
      var cur_pos = $(this).scrollTop(); 
      sections.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li').addClass('current'); 
       } 
      }); 
      sp.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(7)').addClass('current'); 
       } 
      }); 
      sp2.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(6)').addClass('current'); 
       } 
      }); 
      sp3.each(function() { 
       var top = $(this).offset().top - nav_height, 
        bottom = top + $(this).outerHeight(); 
       if (cur_pos >= top && cur_pos <= bottom) { 
        nav.find('a').parent().closest('li').removeClass('current'); 
        $('#cssmenu > ul > li:nth-child(3)').addClass('current'); 
       } 
      }); 
     }); 

Answer 1

Вы можете создать функцию для кода, который повторяется 4 раза - с некоторыми изменениями, которые вы можете покрыть, передавая аргументы этой функции:

var sections = $('.section-page'), 
    sp = $('.sp'), 
    sp2 = $('.sp2'), 
    sp3 = $('.sp3'); 

$(window).on('scroll', function() { 
    var cur_pos = $(this).scrollTop(); 

    function setCurrent(elem, child) { 
     elem.each(function() { 
      var top = $(this).offset().top - nav_height, 
       bottom = top + $(this).outerHeight(); 
      if (cur_pos >= top && cur_pos <= bottom) { 
       nav.find('a').parent().closest('li').removeClass('current'); 
       var li = child !== undefined 
        ? $('#cssmenu > ul > li:nth-child(' + child + ')') 
        : nav.find('a[href="#'+$(this).attr('id')+'"]').parent().closest('li'); 
       li.addClass('current'); 
      } 
     }); 
    } 

    setCurrent(sections); // second argument not passed => undefined child 
    setCurrent(sp, 7); 
    setCurrent(sp2, 6); 
    setCurrent(sp3, 3); 
}); 

Answer 2

Оптимизировать таким образом, и помните,

$(window).on('scroll', function() { 
    var sections = $('.section-page'), 
     sp = $('.sp'), 
     sp2 = $('.sp2'), 
     sp3 = $('.sp3'); 

    var cur_pos = $(this).scrollTop(); 
    sections.each(function() { 
     var top = $(this).offset().top - nav_height, 
       bottom = top + $(this).outerHeight(); 
     if (cur_pos >= top && cur_pos <= bottom) { 
      nav.find('a').parent().closest('li').removeClass('current'); 
      nav.find('a[href="#' + $(this).attr('id') + '"]').parent().closest('li').addClass('current'); 
     } 
    }); 
    $(".sp,.sp2,.sp3").each(function() { 
     var cur_class = ($(this).hasClass("sp") ? "sp" : ($(this).hasClass("sp2") ? 'sp2') : 'sp3'); 
     var top = $(this).offset().top - nav_height; 
     bottom = top + $(this).outerHeight(); 
     if (cur_pos >= top && cur_pos <= bottom) { 
      nav.find('a').parent().closest('li').removeClass('current'); 
      switch (cur_class) { 
       case "sp": 
        $('#cssmenu > ul > li:nth-child(7)').addClass('current'); 
        break; 
       case "sp2" : 
        $('#cssmenu > ul > li:nth-child(6)').addClass('current'); 
        break; 
       case "sp3": 
        $('#cssmenu > ul > li:nth-child(3)').addClass('current'); 
        break; 
      } 
     } 
    }); 

}); 

Дайте ему попробовать, это должно работать.