使用JS为前后均为.wp-block-group的按钮容器应用CSS失效问题

数据老陈

2026-9-29

问题原因

你的两段代码分别存在两个典型错误：

第一段代码的逻辑判断错误
jQuery的DOM查找方法（prev()/next()等）无论是否匹配到对应元素，都会返回一个jQuery对象，而JavaScript中所有对象的布尔值判定结果都为true，所以你的if条件永远成立，自然无论前后元素是否符合要求，样式都会被应用。要验证是否匹配到了元素，需要判断返回的jQuery对象的length属性是否大于0。
第二段代码的语法使用错误
hasClass()方法的入参是纯类名字符串，不需要加类选择器的前缀.。你写.hasClass(".wp-block-group")相当于判断元素是否存在一个类名本身就带.的类，自然无法正确匹配，判断逻辑完全失效后才会出现条件始终成立的异常表现。

修复方案

你可以任选以下一种写法修复：

方案1：选择器匹配+长度判断

$(".btn-superimposed-wrapper").each(function () {
  if ($(this).prev(".wp-block-group").length && $(this).next(".wp-block-group").length) {
    $(this).css({ 
      "margin-top": "-8rem", 
      "margin-bottom": "-6rem", 
      "text-align": "center" 
    });
  }
});

方案2：正确使用`hasClass`判断

$(".btn-superimposed-wrapper").each(function () {
  if ($(this).prev().hasClass("wp-block-group") && $(this).next().hasClass("wp-block-group")) {
    $(this).css({ 
      "margin-top": "-8rem", 
      "margin-bottom": "-6rem", 
      "text-align": "center" 
    });
  }
});