javascript - 使用纯javascript查找特定元素之前和之后的元素

Question

有一个这样的链接列表：

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

如何在活动选项卡之前和之后找到元素？（在这种情况下，第二个和第四个选项卡）。

---

我正在寻找纯 JavaScript的解决方案，因为这里有 jQuery 解决方案。

注意： nextElementSibling IE8和previousElementSiblingFF3 不支持，因此请发布这些浏览器也支持的解决方案。谢谢你。

Answer 1

假设您的<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;

Answer 2

很容易，给定一个最新的浏览器：

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 小提琴演示。

参考：

• nextElementSibling.
• previousElementSibling.