javascript - jQuery:选择所有不具有特定类的子元素

Question

我有以下 HTML 结构:

<li class="menu-has-children"><a href="#">Main</a>
<ul class="some-menu">
    <li><a href="#">Some Link 1</a></li>
    <li class="not-wanted"><a href="#">Some Link 2</a></li>
    <li><a href="#">Some Link 3</a></li>
</ul>
</li>

到目前为止，还有以下 jQuery 代码:

$(document).on('click', '.menu-has-children a', function(e) {
  $(this).nextAll('ul').eq(0).slideToggle();
});

我的目标是显示 this 之后的下一个 ul 元素的所有 li 元素，但排除 li 元素，它们具有附加了不需要的类。我怎样才能实现这一目标？

到目前为止，我仅按照上述代码的含义显示所有 ul 元素，但我不知道如何排除不需要的元素。

Answer 1

您可以使用 jQuery not 函数:

$('li').not('.not-wanted')

参见jQuery not() documentation

对于您的情况，它可能看起来像这样:

$(document).on('click', '.menu-has-children a', function(e) {
  $(this).nextAll('ul').find('li').not('.not-wanted').slideToggle();
});

这与使用 CSS3 not 限定符实现了相同的结果，但可能更容易阅读。我无法保证它的速度与 CSS3 相比如何 - 这需要进行测试。