純粋なJavaScriptを使用して特定の要素の前後にある要素を検索する




jquery 親要素 (2)

このようなリンクのリストを持っています:

<ul>
    <li><a href="#">First tab</a></li>
    <li><a href="#">Second tab</a></li>
    <li class="active"><a href="#">Active tab</a></li>
    <li><a href="#">Fourth tab</a></li>
    <li><a href="#">Fifth tab</a></li>
</ul>

アクティブなタブの前後にどのように要素を見つけることができますか? (この場合、2番目と4番目のタブ)。

jQueryのソリューションがhereので、私は純粋なJavaScriptのみでソリューションを探していhere

注: nextElementSiblingpreviousElementSiblingは、IE 8とFF 3ではサポートされていません。そのため、これらのブラウザでもサポートされる解決策を投稿してください。 ありがとうございました。


最新のブラウザを考えれば、かなり簡単です。

var activeTab = document.getElementsByClassName('active')[0],
    activePrevSibling = activeTab.previousElementSibling,
    activeNextSibling = activeTab.nextElementSibling;

JS Fiddleデモ (恐ろしい、 恐ろしい色の...)

上記は、Esailijaが残したコメントに基づいて編集されました。

document.querySelector(".active")がよりサポートされて簡潔になりました

var activeTab = document.querySelector('.active'),
    activePrevSibling = activeTab.previousElementSibling,
    activeNextSibling = activeTab.nextElementSibling;

JS Fiddleデモ

参考文献:


<ul>要素がelementと呼ばれるとしelement

var active, prev, next;
active = prev = next = element.querySelector('.active');

do prev = prev.previousSibling; while(prev && prev.nodeType !== 1);
do next = next.nextSibling;     while(next && next.nodeType !== 1);

これは、Internet Explorer 8で機能します。最新のブラウザだけが心配な場合は、

var active = element.querySelector('.active');
var prev = active.previousElementSibling;
var next = active.nextElementSibling;




javascript