jQuery代码优化求助：滚动时批量处理指定ID首个子元素的类添加与移除

Great question! Repeating the same jQuery call for dozens of elements is definitely tedious—let's clean this up efficiently.

Optimization Approach #

The key here is to select all your target elements in one go instead of repeating the same operation for each ID. jQuery lets you combine multiple selectors with commas, and then apply addClass/removeClass to the entire collection at once. We'll also cache the selected elements to avoid redundant DOM queries, which boosts performance.

Optimized Code #

First, we'll create a single selector that targets the first <a> inside each of your menu item IDs, then handle the scroll condition concisely:

// Cache the target elements to avoid re-selecting them twice
const $menuLinks = $("#mega-menu-item-22092 a:first, #mega-menu-item-22093 a:first, #mega-menu-item-22094 a:first, #mega-menu-item-22099 a:first, #mega-menu-item-22103 a:first, #mega-menu-item-22104 a:first, #mega-menu-item-22129 a:first, #mega-menu-item-22130 a:first, #mega-menu-item-22131 a:first, #mega-menu-item-22136 a:first, #mega-menu-item-22140 a:first, #mega-menu-item-22141 a:first, #mega-menu-item-22145 a:first, #mega-menu-item-22146 a:first, #mega-menu-item-22151 a:first, #mega-menu-item-22156 a:first, #mega-menu-item-22160 a:first, #mega-menu-item-22161 a:first, #mega-menu-item-22166 a:first, #mega-menu-item-22171 a:first, #mega-menu-item-22228 a:first, #mega-menu-item-22233 a:first, #mega-menu-item-22238 a:first, #mega-menu-item-22195 a:first, #mega-menu-item-22196 a:first, #mega-menu-item-22197 a:first, #mega-menu-item-22202 a:first, #mega-menu-item-22206 a:first");

// Apply add/remove class based on scroll position
if (jQuery(window).scrollTop() > 0) {
  $menuLinks.removeClass("megamenu-header-background");
} else {
  $menuLinks.addClass("megamenu-header-background");
}

If you prefer an even more compact one-liner (similar to your example), you can use a ternary operator to call the appropriate method:

const $menuLinks = $("#mega-menu-item-22092 a:first, #mega-menu-item-22093 a:first, #mega-menu-item-22094 a:first, #mega-menu-item-22099 a:first, #mega-menu-item-22103 a:first, #mega-menu-item-22104 a:first, #mega-menu-item-22129 a:first, #mega-menu-item-22130 a:first, #mega-menu-item-22131 a:first, #mega-menu-item-22136 a:first, #mega-menu-item-22140 a:first, #mega-menu-item-22141 a:first, #mega-menu-item-22145 a:first, #mega-menu-item-22146 a:first, #mega-menu-item-22151 a:first, #mega-menu-item-22156 a:first, #mega-menu-item-22160 a:first, #mega-menu-item-22161 a:first, #mega-menu-item-22166 a:first, #mega-menu-item-22171 a:first, #mega-menu-item-22228 a:first, #mega-menu-item-22233 a:first, #mega-menu-item-22238 a:first, #mega-menu-item-22195 a:first, #mega-menu-item-22196 a:first, #mega-menu-item-22197 a:first, #mega-menu-item-22202 a:first, #mega-menu-item-22206 a:first");
$menuLinks[jQuery(window).scrollTop() > 0 ? "removeClass" : "addClass"]("megamenu-header-background");

Bonus Tip: Even Better Optimization #

If all these menu items share a common parent element or a class (e.g., mega-menu-item), you can avoid listing every single ID entirely. For example, if each menu item has the class mega-menu-item, you could use:

const $menuLinks = $(".mega-menu-item a:first");

This is much cleaner and will automatically include any new menu items you add later.

内容的提问来源于stack exchange，提问作者saravanan kanagaraj