javascript - .parent().next() 不起作用

Question

如果我这样做:

$("a").on("click", function(e) {
    $(this).parent().find("ul").toggleClass("closed opened");
    e.preventDefault();
});

它有效，但它将针对父级的所有 ul

所以我正在做

$("a").on("click", function(e) {
    $(this).parent().next("ul").toggleClass("closed opened");
    e.preventDefault();
});

但这不起作用，我根本没有收到任何错误。

如果我使用此处使用的 html 在 JSFiddle 上执行以下操作:

$("a").on("click", function(e) {
    $(this).next("ul").toggleClass("closed opened");
    e.preventDefault();
});

这没有意义。我需要定位第一个 <ul>我正在单击的父元素的子元素。

<ul>
  <li><a href="">Text</a>
     <ul class="closed">
        <li><a href="">Two</a>
           <ul class="closed">
              <li><a href="">Three</a>
                <ul class="closed">
                   <li><a href="">Four</a></li>
                </ul>
              </li>
           </ul>
         </li>
     </ul>
   </li>
</ul>

.closed {
    display: none;
}

.opened {
    display: block;
}

JSFiddle与示例中使用的 html

更新

Thanks to comment due to my real html having a <span> element I had to use .nextAll()

实际 html

<ul>
  <li>
     <a href="">Text</a>
     <span></span>
     <ul class="closed">
        <li>
           <a href="">Two</a>
           <span></span>
           <ul class="closed">
              <li>
                <a href="">Three</a>
                <span></span>
                <ul class="closed">
                   <li><a href="">Four</a></li>
                </ul>
              </li>
           </ul>
         </li>
     </ul>
   </li>
</ul>

This is the JSFidle with the real html

Answer 1

您正在寻找的是siblings()而不是next()

$("a").on("click", function(e) {
    $(this).siblings("ul").toggleClass("closed opened");
    e.preventDefault();
});

next 无法与您配合的原因在于您尝试使用它的方式。您首先使用了 parent()，然后要求获取 ul 类型的 next() 元素，这与方式不匹配next 应该可以工作。

因为在你的DOM结构中，上到parent之后的next元素将是你的 anchor 标记，并且next只会匹配仅 dom 中的第一个元素，而不是与选择器匹配的第一个元素，这是错误使用的根本原因。

考虑一下带有选择器的 next 如何工作的官方描述:

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

nextall 也能达到目的。