JQuery中如何获取点击元素内部的指定类元素？

嘿，这问题我熟！你要的就是只针对被点击的.class1元素，获取它内部唯一的.innerClass元素文本对吧？完全不用怕其他同名元素干扰，下面给你两种靠谱的实现方式：

方法一：jQuery 实现（和你的伪代码风格匹配） #

直接在点击事件里用$(this)指代当前被点击的.class1元素，再用find()方法在它的子元素范围内查找.innerClass，这样就只会定位到当前点击元素内部的目标，不会碰其他地方的同名元素：

$(".class1").click(function () {
  // 精准获取当前点击元素内部的.innerClass文本
  var text = $(this).find(".innerClass").text();
  // 这里可以添加你需要的后续操作，比如打印或者赋值
  console.log(text);
});

为啥这方法靠谱？因为$(this)就是你刚点击的那个.class1实例，find()方法是从这个元素的后代里筛选，完全局限在当前点击元素的上下文里，完美符合你“精准获取”的需求，而且你说.innerClass在.class1内部是唯一的，所以直接取text()就ok。

方法二：原生 JavaScript 实现（不用jQuery也能搞定） #

如果以后项目不用jQuery了，用原生JS也能轻松实现，核心思路一样：基于点击元素的上下文来查找子元素：

// 先获取所有的.class1元素，给每个绑定点击事件
document.querySelectorAll(".class1").forEach(item => {
  item.addEventListener("click", function() {
    // 在当前点击元素内部查找.innerClass
    const innerElement = this.querySelector(".innerClass");
    // 加个判断防止意外找不到的情况
    if (innerElement) {
      const text = innerElement.textContent;
      console.log(text);
    }
  });
});

这里的this.querySelector(".innerClass")只会在当前点击的.class1元素的后代里查找，和jQuery的find()效果一致，而且querySelector会返回第一个匹配的元素（正好你内部唯一），非常精准。

为啥不能用document.getElementsByClassName？ #

因为这个方法是从整个文档里查找所有带指定类名的元素，会把页面上其他地方的.innerClass也捞进来，根本做不到“只取点击元素内部的”，所以咱们上面的方法才是正确的打开方式。

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