切换 $(this) 元素的兄弟元素的可见性 |没有唯一 ID [jQuery]

Question

我需要div.edit-button 来切换其兄弟div.additionalFieldForm。

请注意，页面上有多个div.edit-button 和div.additionalFieldForm，但我想定位与单击的div.edit-button 位于同一“系列”中的div.additionalFieldForm。

$(".edit-button").click(function () {

  // PROBLEMATIC SELECTOR BELOW:
  $(this).closest("div").prev().toggle();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm">Content</div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm">Content</div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

我尝试了其他选择器，但我不能专门针对被单击的编辑按钮的div.additionalFieldForm 兄弟。

编辑：我意识到一定存在潜在问题，因为选择器适用于 jsFiddle (http://jsfiddle.net/wf7jjoq7/)，但不适用于我的网站，没有任何控制台错误。

Answer 1

尝试使用siblings()

$(".edit-button").click(function () {  
  $(this).siblings(".additionalFieldForm").toggle();
});

Answer 2

试试这个解决方案：

$(".edit-button").click(function () {

  // PROBLEMATIC SELECTOR BELOW:
  $(this).parent().find(".additionalFieldForm").first().toggle();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

Answer 3

li 是共同的父母。所以，

$(".edit-button").click(function () {  
 $(this).closest("li").find(".additionalFieldForm").toggle();
});