Question

这是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-box。但是我不想相对选择它，例如使用$(this).parents('p').next().toggle，因为如果我更改DOM，我不想在以后的调试中遇到问题。

Answer 1

您需要遍历父p元素，然后立即定位下一个兄弟：

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

Working Demo

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

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

Working Demo

Answer 2

由于您说您不希望使用dom关系，因此另一种方法可能是使用属性值。例如，您可以使用data-id属性来指定数字，其中相同的数字将与相关的new-answer和answer-box元素相关联。

$(document).ready(function() {
  $('a.new-answer').click(function() {
    var id = $(this).data('id');
    $('.answer-box[data-id="' + id + '"]').toggle();
  });
});

.answer-box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><a href="#" class="new-answer" data-id="1">New answer</a></p>
<div class="answer-box" data-id="1"></div>

<p><a href="#" class="new-answer" data-id="2">New answer</a></p>
<div class="answer-box" data-id="2"></div>

<p><a href="#" class="new-answer" data-id="3">New answer</a></p>
<div class="answer-box" data-id="3"></div>

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

2 个答案:

Working Demo

Working Demo