循环遍历 dom 对象数组并找到第一个匹配的

Question

我的 eform 顶部有一个导航栏，可以跳到下一个和上一个 div（页面/部分），但前提是该 div 可见。除非使用复选框激活，否则 div 是隐藏的。因此，导航栏上的下一个按钮需要始终将您带到下一个可用的 div。

以下代码适用于第一个按钮，但这些导航栏显示在每个部分的顶部，因此下一部分上有一个运行相同功能的下一个按钮（这不起作用），我正在努力在这里解释自己，所以请如果我没有道理就大声喊叫。这是我的代码。

function showNext(){

    var pages = [document.getElementById("page2"),document.getElementById("page3")];
    var next = ["page2marker","page3marker"];

    for (var i=0; i<pages.length; i++){
        if(pages[i].style.display == "block"){
            window.location.hash = next[i];
        }
    }
}

我可以修改此功能，使其适用于所有按钮吗？即始终导航到下一个可见的可用 div？我想我可能错过了一个技巧和一大堆信息，但看看你的想法，有什么想法吗？

非常感谢

Answer 1

您可以使用 jQuery 和 jQuery.next 函数来实现此目的 - http://api。 jquery.com/next/。

对于这样的一组 html：

<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>

您可以使用如下内容：

$('.showNext').bind('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});