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 解决方案是 here .

注意 nextElementSibling 和 previousElementSibling 不受 IE8 和 FF3 支持，因此请发布这些浏览器也支持的解决方案.谢谢。

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;