-4

我有以下标记：

<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”。

4

2 回答 2

0

为了获得您想要的元素，您需要一个函数（见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");

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

片段：

/* ----- 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"));
}
<!----- 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>

于 2018-02-05T14:01:20.753 回答
-1

试试 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>

于 2018-02-05T13:51:19.957 回答