如何使用jQuery统一访问带有序列ID的页面元素？

DevOps 小满

2026-5-21

嘿，碰到这种重复写10遍几乎一模一样的代码，确实挺头疼的，咱们可以用几种简洁的方式来重构，让代码更易维护：

方法1：利用ID前缀选择器匹配所有目标元素

jQuery支持属性前缀选择器[id^="set"]，它能选中所有id以set开头的元素。然后我们通过$(this)来定位当前触发事件的.select元素，再操作它内部的子元素，这样就不用为每个setN单独写逻辑了：

$('.element [id^="set"] .select').on('mouseleave', function() {
  // 缓存当前触发事件的.select元素，避免重复DOM查找
  const $currentSelect = $(this);
  const $options = $currentSelect.find('.options');
  
  if ($options.is(':visible')) {
    $options.slideUp('fast');
    $currentSelect.find('a.value').addClass('selected').text('1');
  }
});

这里的[id^="set"]会匹配set1到set10所有元素，$(this)保证我们只操作当前鼠标离开的那个.select对应的子元素，不会影响其他模块。

方法2：添加统一类名（更推荐的语义化方案）

如果能修改HTML的话，给所有set1到set10的元素加一个共同的类，比如set-group，这样选择器更清晰，性能也比属性选择器更好：

修改后的HTML示例：

<div class="element">
  <div id="set1" class="set-group">
    <div class="select">...</div>
  </div>
  <div id="set2" class="set-group">
    <div class="select">...</div>
  </div>
  <!-- ... 其他set3到set10的结构 -->
</div>

简化后的JS代码：

$('.element .set-group .select').on('mouseleave', function() {
  const $currentSelect = $(this);
  const $options = $currentSelect.find('.options');
  
  if ($options.is(':visible')) {
    $options.slideUp('fast');
    $currentSelect.find('a.value').addClass('selected').text('1');
  }
});

这个方案的好处是语义化更强，以后新增set11、set12这类元素，只要加上set-group类，JS代码完全不用修改，扩展性拉满。