javascript - 选择两个 id 之间的每个元素

Question

[更新:由于问题似乎无法仅使用 CSS 解决，JavaScript 函数使用两个标记的元素作为输入就足够了]

我有一个递归列表，其中包含两个用 ID 标记的元素(T1、T2)。 这两个元素不一定是彼此的 sibling 。

我的问题是关于一个 CSS 选择器 来选择 这两个 ID 之间的每个 li 列表项:

• 包括:
  • 本身带有 ID 的元素
  • 在这两者之间(递归)的所有 li 子节点或父节点，而不仅仅是兄弟节点
• (不包括
  • 第一个id之前或第二个id之后的所有元素
  • 所有非li元素)

ids T1 和 T2 也可以有不同的顺序，T2 在前，T1 在某处稍后在树中。

---

下面的示例显示了两个 ID 元素以及应选择的元素:

#T1 { color: red;}
#T2 { color: blue;}

<ul>
  <li>not selected</li>
  <li>not selected</li>
  <ul>
    <li>not selected</li>
    <li id="T1">selected (specific id)</li>
    <li>selected</li>
    <ul>
      <li>selected</li>
    </ul>
  </ul>
  <ul>
    <li>selected</li>
    <li>selected</li>
    <ul>
      <li>selected</li>
      <li>selected</li>
      <li id="T2">selected (specific id)</li>
    </ul>
    <li>not selected</li>
  </ul>
  <li>not selected</li>
  <li>not selected</li>
  <ul>
    <li>not selected</li>
  </ul>
  <li>not selected</li>
</ul>

Answer 1

这是一个函数，它接受一个元素数组，遍历它们，并将特定类应用于两个 id 之间的所有元素(并且还包括具有 id 的元素)。

var liElements = document.querySelectorAll("li");

var selectElementsBetweenIds = function (elements, id1, id2) {

  var firstIdFound = false;
  var applySelector = false;


  for (var i = 0; i < elements.length; i++) {
    var elementId = elements[i].getAttribute("id");

    if (elementId === id1 || elementId === id2) {
      applySelector = firstIdFound ? false : true;
      firstIdFound = applySelector ? true: false;
      elements[i].classList.add("selected");
      continue;
    }
    if (applySelector) {
      console.log("getting here");
      elements[i].classList.add("selected");
    }
  }
}

selectElementsBetweenIds(liElements, "T2", "T1");

JSFiddle Example