javascript - 将祖先选择器添加到此 javascript

Question

有没有一种简单的方法可以添加一些关于将祖先li标签设置为 .active 的内容？

<script language="javascript" type="text/javascript">
function setActive() {
  aObj = document.getElementById('toc').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
window.onload = setActive;
</script>

Answer 1

这取决于你的意思。我没有从你的问题中全面了解发生了什么。从外观上看，您正在抓取一个 id 为“toc”的元素，所以我猜这个 toc 包含LI元素和A元素。在这种情况下，您可以在 中使用星号getElementsByTagName，这可能会更慢，具体取决于那里有多少其他元素。

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('*')
    , i = 0
    , l = a.length
    , name;

  for (; i < l; i++) { 
    el = a[i];
    name = el.nodeName.toLowerCase();
    if (name === 'li' || (name === 'a' 
        && ~href.indexOf(el.href))) {
      el.className = 'active';
    }
  }
}

如果您在文档树中要求更高的祖先 LI，这就是您想要的：

function setActive() {
  var href = window.location + ''
    , el = document.getElementById('toc')
    , a = el.getElementsByTagName('a')
    , i = 0
    , l = a.length;

  // descendants
  for (; i < l; i++) { 
    if (~href.indexOf(a[i].href)) {
      a[i].className = 'active';
    }
  }

  // parents
  while (el = el.parentNode) {
    if (el.nodeName.toLowerCase() === 'li') {
      el.className = 'active';
    }
  }
}

Answer 2

步行element.parentNode检查tagName.toLowerCase() == "li"以识别父母<li>。然后设置className = "active"。

var parent = aObj[i].parentNode;
while (parent && parent.tagName.toLowerCase() != "li")
    parent = parent.parentNode;
if (parent) parent.className = "active";

Answer 3

我没有测试过它或任何东西，但我认为这会起作用：

<script language="javascript" type="text/javascript">
function setActive() {
  aObj = document.getElementById('toc').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
    var node = aObj[i];
    while(document != (node = node.parentNode)){
      if(node.tagName.toLowerCase() == 'li')
        node.className='active';
    }
  }
}
window.onload = setActive;
</script>