如何获取点击元素上方第一个指定class的DOM元素？

嘿，我来帮你搞定这个需求！你的HTML结构里混着多组.main和.second元素，现在要实现点击某个.second时，精准定位到它上方最近的第一个.main元素，用jQuery可以这样写：

直接在你已有的事件绑定代码里，结合prevAll()和first()方法就能实现，完整代码示例如下：

$(document).on('click', '.second', function(){
  // 定位当前点击元素上方最近的第一个.main元素
  const closestUpperMain = $(this).prevAll('.main').first();
  
  // 这里可以添加你需要的操作，比如给找到的元素加个高亮样式
  closestUpperMain.addClass('highlighted');
})

代码逻辑说明 #

• prevAll('.main')：会获取当前被点击元素（this）之前所有的同辈元素中，class为main的元素，这些元素是按从近到远的顺序排列的（离点击元素最近的.main排在最前面）。
• .first()：从筛选出的元素里取第一个，正好就是我们要找的「上方最近的那个.main」。

如果担心某些.second元素前面没有匹配的.main，可以加个判断避免后续操作报错：

$(document).on('click', '.second', function(){
  const closestUpperMain = $(this).prevAll('.main').first();
  if (closestUpperMain.length > 0) {
    // 确认找到元素后再执行操作
    closestUpperMain.css('background-color', '#f5f5f5');
  }
})

另外还有一种等价写法，用prevUntil()配合prev()，不过上面的方法更直观易懂：

// 另一种可行的写法
const closestUpperMain = $(this).prevUntil('.main').prev();

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