JavaScript/jQuery中如何访问当前点击对象的子元素？

你之前用this.$(".dot")是错误的——this是原生DOM元素，本身没有$方法，必须先把它包装成jQuery对象，才能用jQuery的API操作。

正确的实现思路很简单：

1. 给所有横幅绑定点击事件
2. 在事件处理函数里，用$(this)获取当前被点击的横幅div
3. 用jQuery的查找方法定位到该div内部的.dot元素，添加.read-dot类

完整代码示例 #

HTML结构

<div class="banner">
  <span class="dot"></span>
  横幅内容1
</div>
<div class="banner">
  <span class="dot"></span>
  横幅内容2
</div>
<div class="banner">
  <span class="dot"></span>
  横幅内容3
</div>

CSS（隐藏已读红点）

.dot {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.read-dot {
  display: none;
}

jQuery代码

// 给所有横幅绑定点击事件
$(".banner").click(function() {
  // 找到当前点击横幅内的dot元素，添加隐藏类
  $(this).find(".dot").addClass("read-dot");
});

如果.dot是横幅div的直接子元素，也可以用$(this).children(".dot")替代.find()，效果一致。但.find()能处理更深的嵌套结构，通用性更强。

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