如何找到类名包含选中元素类名子串的最近兄弟元素？

算力阿峰

2026-8-5

提取分组类名并隐藏对应底部元素

问题场景

现有如下DOM结构：

<li class="header group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom"></li>

<li class="header group2"></li>
<li class="group2"></li>
<li class="group2"></li>
<li class="group2bottom"></li>

.. and so on

已通过以下代码获取所有header元素：

let headers = $('.header');

需要遍历每个header元素，提取其中groupX格式的类名，然后匹配对应的groupXbottom元素并隐藏。尝试使用$(this).classList[0]结合正则提取类名未得到正确结果，求解决方法。

解决方案

错误原因

$(this)是jQuery包装后的对象，不存在原生DOM的classList属性，直接调用会报错。要访问原生属性，需使用this.classList（原生DOM元素），或者用jQuery方法获取类名。

方法一：原生classList结合查找

这种方法不依赖类名顺序，更可靠：

headers.each(function() {
  // 获取当前header的所有类名集合
  const classList = this.classList;
  // 筛选出以group开头的类名
  const groupClass = Array.from(classList).find(cls => cls.startsWith('group'));
  
  if (groupClass) {
    // 拼接目标类名并隐藏元素
    $(`.${groupClass}bottom`).hide();
  }
});

方法二：jQuery类名字符串结合正则提取

如果确定类名格式固定，也可以用正则匹配：

headers.each(function() {
  // 获取所有类名字符串
  const classStr = $(this).attr('class');
  // 匹配group后跟数字的类名
  const groupMatch = classStr.match(/group\d+/);
  
  if (groupMatch) {
    $(`.${groupMatch[0]}bottom`).hide();
  }
});