Question

我有以下标记：

<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span>Link 2</span>
    <button>
      chevron_down
    </button>
    <ul class="lvl--2" alt="NOT THIS UL">
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>
<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span alt="CLICK HERE">Link 2</span>
    <button>
      chevron_down
    </button>
    <ul class="lvl--2" alt="SELECT THIS">
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

点击“链接2 ”。我现在如何选择下一个ul（ .lvl - 2 ）？我怎样才能找到下一个UL？无论是否有按钮。

这不起作用：

element.closest(ul);

选择“lvl - 1”。

Answer 1

为了获得你想要的元素，你需要一个函数（参见下面的nextSibling），它可以获得与给定选择器匹配的下一个元素（如果存在）。

<强>代码：

function nextSibling (element, selector) {
  /* Check whether a selector is given. */
  if (selector) {
    var
      /* Cache the children of the parent and the index of the element in them. */
      family = element.parentNode.children,
      index = [].indexOf.call(family, element),

      /* Find the elements with greater index that match the given selector. */
      siblings = [].filter.call(family, (e, i) => e.matches(selector) && i > index);

    return siblings[0];
  }
  else return element.nextElementSibling;
}

上述函数可以在click事件处理程序中使用如下：

nextSibling(this, "ul.lvl--2");

请查看以下代码段以获取工作示例。

<强>段：

＆＃13;

/* ----- JavaScript ----- */

function nextSibling (element, selector) {
  /* Check whether a selector is given. */
  if (selector) {
    var
      /* Cache the children of the parent and the index of the element them. */
      family = element.parentNode.children,
      index = [].indexOf.call(family, element),

      /* Find the elements with greater index that match the given selector. */
      siblings = [].filter.call(family, (e, i) => e.matches(selector) && i > index);

    return siblings[0];
  }
  else return element.nextElementSibling;
}

document.getElementById("span").onclick = function() {
    console.log(nextSibling(this, "ul.lvl--2"));
}

＆＃13;

<!----- HTML ----->
<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span>Link 2</span>
    <button>
      chevron_down
    </button>
    <ul class="lvl--2" alt="NOT THIS UL">
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>
<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span id = "span" alt="CLICK HERE">Link 2 (CLICK)</span>
    <button>
      chevron_down
    </button>
    <ul class="lvl--2" alt="SELECT THIS">
      <li>Sub Link 1</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

＆＃13;

Answer 2

使用querySelector和最近（祖先）或nextSibling

document.querySelector(".lvl--1 span").onclick=function() {
  // parent UL
  console.log(this.closest("ul").querySelector("ul").className)
  // OR parent LI:
  console.log(this.closest("li").querySelector("ul").className)
  // OR nextSibling:
  var el = this.nextSibling;
  while (el) {
    if (el && el.nodeName=="UL") {
      console.log(el.className);
      break;
    }
    el = el.nextSibling;
  }
}

<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span>Link 2 (CLICK)</span>
    <button>
      chevron_down
    </button>
    <ul class="lvl--2">
      <li>Sub Link 1</li>
      <li>Sub Link 2</li>
      <li>Sub Link 3</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

如果UL与您单击的范围不在同一个杠杆上，则需要这种代码：

document.querySelector(".lvl--1 span").onclick=function() {
  var parent = this.closest("li"); // assuming LI is a parent that contains a UL further down
  var ULs = parent.querySelectorAll("ul");
  for (var i=0;i<ULs.length;i++) {
    for (var j=0;j<ULs[i].classList.length;j++) {
      if (ULs[i].classList[j].indexOf("lvl")==0) {
        console.log("found",ULs[i].classList[j]) 
      }
    }  
  }
}

<ul class="lvl--1">
  <li>Link 1</li>
  <li>
    <span>Link 2 (CLICK)</span>
    <button>
      chevron_down
    </button>
    <ul>
      <li>Sub Link 1</li>
      <li>Sub Link 2</li>
      <ul class="lvl--2">
        <li>...</li>
      </ul>
      <li>Sub Link 3</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

用vanilla javascript查找下一个ul？

2 个答案: