Добавление селектора предков в этот javascript - PullRequest
Новая
       12

Добавление селектора предков в этот javascript

0 голосов
/ 15 июля 2011

Есть ли простой способ добавить немного о настройке тегов-предков 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>

Ответы [ 3 ]

0 голосов
/ 15 июля 2011

Я не проверял это или что-то еще, но я думаю, что это будет работать: 

<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>
0 голосов
/ 15 июля 2011

Это зависит от того, что вы имеете в виду. Я не получаю полную картину того, что происходит из вашего вопроса. Судя по всему, вы получаете элемент с идентификатором «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';
    }
  }
}
0 голосов
/ 15 июля 2011

Прогулка 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";
...