34

次のようなリンクを含むリストがあります。

<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ソリューションがここにあるので、私は純粋なJavaScriptのみのソリューションを探しています。

注: nextElementSiblingおよびpreviousElementSiblingIE8 と FF3 ではサポートされていないため、これらのブラウザーでもサポートされるソリューションを投稿してください。ありがとうございました。

4

2 に答える 2

49

<ul>あなたの要素が呼ばれると仮定します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;
于 2012-07-13T17:19:02.650 に答える
20

最新のブラウザがあれば、非常に簡単です。

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

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

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

document.querySelector(".active")よりサポートされ、簡潔です

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

JS フィドルのデモ。

参考文献:

于 2012-07-13T17:17:09.063 に答える