Question

[更新：因为问题似乎无法使用CSS 解决， JavaScript 功能使用两个标记的元素作为输入就够了]

我有一个递归列表，其中包含两个用ID标记的元素（T1，T2）。这两个元素不一定是彼此的兄弟姐妹。

我的问题是 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

选择两个ID

1 个答案: