如何用JS/jQuery通过class_name2选择器修改前一个Section的class_name1？

没问题，这两种实现方式都很直观，我给你分别写示例代码，你可以根据项目环境选择：

一、原生JavaScript实现 #

假设你的DOM结构是这样的：

<section class="class_name1"></section>
<div class="class_name2"></div>

我们可以先选中class_name2的元素，再通过兄弟元素关系找到对应的class_name1元素，然后用classList API修改类名：

// 选中class_name2的元素（如果有多个，这里用querySelector取第一个，多个的话用querySelectorAll遍历）
const targetDiv = document.querySelector('.class_name2');
// 找到它前面的section兄弟元素（也就是class_name1的元素）
const targetSection = targetDiv.previousElementSibling;

// 替换类名：先移除旧类，再添加新类
targetSection.classList.remove('class_name1');
targetSection.classList.add('new_class_name');

// 如果只是想添加新类而保留旧类，直接用add即可：
// targetSection.classList.add('extra_class');

二、jQuery实现 #

jQuery的语法更简洁，利用它的遍历方法可以快速定位目标元素：

// 选中class_name2的元素，找到它前面的class_name1兄弟元素，然后修改类名
$('.class_name2').prev('.class_name1')
  .removeClass('class_name1') // 移除原有类名
  .addClass('new_class_name'); // 添加新类名

// 如果要添加类而不删除旧类，只保留addClass即可
// $('.class_name2').prev('.class_name1').addClass('new_class_name');

注意事项 #

• 如果页面中有多个class_name2元素，原生JS需要用querySelectorAll遍历处理，jQuery会自动遍历所有匹配元素；
• 确保DOM加载完成后再执行代码：
  • 原生JS可将代码包裹在document.addEventListener('DOMContentLoaded', function() { ... })中；
  • jQuery可将代码包裹在$(document).ready(function() { ... })中。

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