2011-07-15 5 views
0

祖先liタグを.activeに設定することについて簡単に追加する簡単な方法はありますか?親<li>を識別するためにtagName.toLowerCase() == "li"をチェックこのjavascriptに祖先セレクターを追加する

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

答えて

0

それはあなたが何を意味するかに依存します。私はあなたの質問から何が起こっているのかを完全に把握していません。その外観から、あなたは "toc"のidを持つ要素をつかんでいます。だから、このtocには、A要素だけでなく、LI要素も含まれていると推測しています。この場合、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

ウォークelement.parentNode。次に、className = "active"と設定します。

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

私はそれか何かをテストしていませんが、私はこれが仕事だと思う:

<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> 
関連する問題