使用纯javascript在特定元素之前和之后查找元素 [英] Find the element before and after a specific element with pure javascript

问题描述

列出包含以下链接的列表：

Having a list with links like this:

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

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

How can be found element before and after the active tab? (In this case, the second and fourth tab).

我正在寻找纯JavaScript <的解决方案/ strong>仅限，因为jQuery解决方案是此处 。

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

Note: nextElementSibling and previousElementSibling are not supported by IE8 and FF3, so please post solutions that would be supported by those browsers as well. Thank you.

推荐答案

假设你的< ul> 元素被调用元素：

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.如果您只担心现代浏览器：

This will work in Internet Explorer 8. If you're only worried about modern browsers:

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

这篇关于使用纯javascript在特定元素之前和之后查找元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！