如何用JavaScript/jQuery判断点击文本的div1父级是否含特定类

你的问题核心是jQuery对象与原生DOM元素属性混用，同时可以通过更精准的父元素选择方式实现需求。以下是几种可行方案：

方案一：jQuery closest + hasClass（最推荐） #

利用closest('.div1')直接向上定位最近的带div1类的父元素，再用jQuery自带的hasClass方法判断是否包含exampleclass，完美适配你的HTML结构：

// 给所有文本所在的div绑定点击事件
$('.5').on('click', function() {
  if ($(this).closest('.div1').hasClass('exampleclass')) {
    console.log('found');
  }
});

方案二：严格定位第4个父元素（适配固定层级场景） #

如果需要严格找到第4个父元素再做验证，可以多次调用parent()，同时检查类名：

$('.5').on('click', function() {
  // 向上遍历4次父元素
  const targetParent = $(this).parent().parent().parent().parent();
  // 同时满足是div1类且包含exampleclass
  if (targetParent.hasClass('div1') && targetParent.hasClass('exampleclass')) {
    console.log('found');
  }
});

方案三：原生JS实现（无需jQuery） #

如果不想依赖jQuery，用原生DOM API也能完成：

// 获取所有文本所在的div元素
document.querySelectorAll('.5').forEach(el => {
  el.addEventListener('click', function() {
    let current = this;
    // 向上找4次父节点
    for (let i = 0; i < 4; i++) {
      current = current.parentNode;
      if (!current) break; // 防止层级不足报错
    }
    // 验证是否符合条件
    if (current && current.classList.contains('div1') && current.classList.contains('exampleclass')) {
      console.log('found');
    }
  });
});

原代码错误说明 #

你之前的代码报错是因为$(this).closest('.div1')返回的是jQuery对象，而classList是原生DOM元素的属性。如果要沿用你的思路，需要先把jQuery对象转为原生元素：

// 修正后的原代码
if ($(this).closest('.div1')[0].classList.contains('exampleclass')) {
  console.log('found');
}

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