jquery - 切换最近的元素，但在当前类之外

Question

在这里，我想隐藏距单击的 msg_head 类最近(之后)的 msg_wrap div。我的jquery:

$(document).on("click", ".msg_head", function() {
  $(this).closest('.msg_wrap').slideToggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg_head" id="c_name_msgHead">
  <div class="close">x</div>
</div>

<div class="msg_wrap">wrap
</div>

<div class="msg_head" id="c_name_msgHead">
  <div class="close">x</div>
</div>

<div class="msg_wrap">wrap
</div>

但是它不起作用。有什么想法吗？

Answer 1

.closest()查找祖先树:

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

您需要的是.next() :

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

$(document).on("click", ".msg_head", function() {
  $(this).next('.msg_wrap').slideToggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg_head" id="c_name_msgHead">
  <div class="close">x</div>
</div>

<div class="msg_wrap">wrap
</div>

<div class="msg_head" id="c_name_msgHead">
  <div class="close">x</div>
</div>

<div class="msg_wrap">wrap
</div>