Vanilla JS实现：指定类元素下方为非同类元素时添加目标类

核心判断逻辑非常直接，不需要复杂循环嵌套：

• 用nextElementSibling获取元素紧邻的下一个元素节点，这个API会自动忽略标签之间的换行、空白文本节点，不需要手动做节点类型过滤
• 遍历所有目标类元素时，只要满足「下一个相邻元素不存在」或者「下一个相邻元素不带指定类名」两个条件之一，就给当前元素追加nomargin类

完整实现代码：

// 获取所有类名为my-paragraph的元素
const targetEls = document.querySelectorAll('.my-paragraph');

targetEls.forEach(el => {
  const nextSiblingEl = el.nextElementSibling;
  // 满足条件就追加nomargin类
  if (!nextSiblingEl || !nextSiblingEl.classList.contains('my-paragraph')) {
    el.classList.add('nomargin');
  }
});

注意事项 #

• 不要使用nextSibling做判断，这个属性会把元素间的空白、换行文本节点识别为兄弟节点，会导致判断逻辑出错
• 上述代码完全匹配示例场景：连续段落组的最后一个段落（后面跟其他标签、或者处于父容器末尾）会被加上nomargin类，和预期DOM结构完全一致
• 如果页面后续会动态插入/删除相关元素，只要把上述逻辑封装成函数，在DOM更新完成后重新调用即可

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