点击click-me元素时为上方首个无关联box类Div添加favourite类的问题

问题原因分析 #

你原来的代码没生效，核心原因是prevAll()方法只能查找当前元素的同级前置元素，而.click-me嵌套在.modal的深层结构里，它的同级都是父容器内的其他元素，根本碰不到外面的.box元素，自然找不到目标。

正确的jQuery解决方案 #

我们需要先从.click-me向上找到它所在的最外层容器.modal，再从.modal出发查找它的同级前置元素里第一个.box，最后给这个.box添加类名：

$(".click-me").click(function () {
  // 先找到当前点击元素所在的.modal容器
  const modalContainer = $(this).closest('.modal');
  // 从.modal容器找前面第一个.box元素并添加类
  modalContainer.prevAll('.box:first').addClass('favourite');
});

代码解释 #

• $(this).closest('.modal')：从当前点击的.click-me元素开始，向上遍历DOM树，找到最近的带有.modal类的父容器（也就是和.box同级的那个.modal）。
• prevAll('.box:first')：在.modal的同级前置元素中，筛选出第一个带有.box类的元素，这正是你要操作的目标。
• addClass('favourite')：给找到的.box元素添加目标类名。

简化写法（可选） #

如果你的DOM结构里.box确实是.modal的直接前置同级元素，也可以简化成：

$(".click-me").click(function () {
  $(this).closest('.modal').prev('.box').addClass('favourite');
});

不过用prevAll('.box:first')兼容性更好，哪怕.box和.modal之间还有其他同级元素，也能准确找到第一个.box。

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