jquery类选择器仅捕获类中单击的元素

下面是演示：

以下是HTML：

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

---

我希望每当单击

.new answer

链接时，它下面相应的

.answer框

就会打开。但是，我不想相对地选择它，例如使用

$（this）.parents（'p'）.next（）.toggle

，因为我不想在以后调试时遇到问题，如果我更改了DOM。

您需要遍历到parent

p

元素，然后针对下一个兄弟：

$(this).parent().next().toggle();

更新： 由于Dom结构可能有所不同：

$(this).parent().nextAll('.answer-box').first().toggle();

---

既然您说过不希望使用dom关系，那么另一种方法可能是使用属性值。例如，您可以使用

数据id

属性来指定一个数字，其中相同的数字将关联到相关的

新答案

和

答案框

元素

$（文档）.ready（函数（）{
$（'a.new-answer'）。单击（函数（）{
var id=$（this.data（'id'）；
$（'.answer box[data id=“”+id+“]”]'）。toggle（）；
});
});
。应答框{
显示：无；
}




除此之外还有其他方法吗？我在帖子中提到这正是我想要避免的。原因是我使用的是刀片模板，而当前DOM仅适用于
$answer您可以共享该DOM吗？当然可以。类似这样的内容：。请注意第一个
。新答案
链接现在在单击时没有打开它下面的div