不能用 next 遍历 DOM

Question

我有以下标记

<a class="list-group-item" href="#">
    <div class='row'>
        <div class='col-xs-10 shows-submenu'>
            <h4 class="list-group-item-heading">A title</h4>
        </div>
    </div>
</a>

<div class='list-group-item hidden-group-item hide'>
    <div class="row">
        <div class="col-sm-12">
            <p class="list-group-item-text">
              Some text
            </p>
        </div>
    </div>
</div>

单击“显示子菜单”时，我想删除“隐藏组项”中的“隐藏”类。 我试图用下面的 jQuery 来做这件事

$(function(){

    $('body').on('click', '.shows-submenu', function() {
      if ($(this).next('.hidden-group-item').hasClass('hide')) {
         $('.hidden-group-item').addClass('hide');
         $(this).next('.hidden-group-item').toggleClass('hide');
      }
      else {
         $(this).next('.hidden-group-item').toggleClass('hide');
      }
      $('.hidden-form-item').addClass('hide');
    });


});

但我不能让它工作。 next() 方法似乎仅在将“shows-submenu”类添加到整个 a 标记但不在我想要的 col-xs-10 div 中时才有效。

你能弄清楚为什么这不起作用吗？

谢谢

Answer 1

div.hidden-group-item 不是.shows-submenu 元素的兄弟，因此.next() 将不起作用。

您可以使用.closest() 向上遍历祖先，然后使用.next()

 var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');

您的代码也可以改进。

$(function() {
  $(document).on('click', '.shows-submenu', function() {
    var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');
    $('.hidden-form-item').not(this).addClass('hide');
    hiddenDiv.toggleClass('hide');
  });
});

.hide {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="list-group-item" href="#">
  <div class='row'>
    <div class='col-xs-10 shows-submenu'>
      <h4 class="list-group-item-heading">A title</h4>
    </div>
  </div>
</a>

<div class='list-group-item hidden-group-item hide'>
  <div class="row">
    <div class="col-sm-12">
      <p class="list-group-item-text">
        Some text
      </p>
    </div>
  </div>
</div>

Answer 2

替换以下内容：

$(this).next('.hidden-group-item')

与

$(this).closest('a').next('.hidden-group-item')

然后再试一次。

解释： next() 获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索下一个兄弟。 并且hidden-group-item 不是您的 html 中的兄弟姐妹。

Answer 3

试试这个：

 $('body').on('click', '.shows-submenu', function() {
      if ($(this).closest(".list-group-item").next('.hidden-group-item').hasClass('hide')) ......

Answer 4

next() 方法只适用于兄弟姐妹。

像这样使用 find() 方法。

$.find('.hidden-group-item').toggleClass('hide');