javascript - 使用 Javascript 查找页面上所有 H2 的值

Question

我一直在尝试在 Google 上找到解决方案，所以我想我会将其发布到社区。我需要使用 JavaScript 来定位页面上的所有 H2，获取 innerHTML 值，然后在 div 中水平循环它们（很容易）以在页面顶部显示一个副标题锚列表。有人可以告诉我或提示我如何使用 JavaScript 例程来定位页面上的所有 H2 吗？谢谢！

Answer 1

如果你使用 jQuery，你可以运行类似这样的东西

$('h2').each({
    /* function */
});

然后附加到.nav您可以运行的容器

$('h2').each(function() { 
    $('.nav').append($(this).text())
});

Answer 2

使用document.getElementsByTagName选择所有h2s：

var h2s = document.getElementsByTagName('h2');
for(var i = 0, length = h2s.length; i < length; i++){
    // Do something with
    h2s[i].innerHTML;
}

Answer 3

首先，为您要创建的链接创建一个空集合：

var $links = $();

然后，循环遍历每个h2using .each()、 providersindex和h2as 参数——第一个保持计数，第二个获取<h2>我们正在处理的当前的引用。

$('h2').each(function(index, h2){
    // If there is no id (to link to), create one based on the index 
    if(!h2.id){
        h2.id = 'header' + index;
    }

    // Get a jQuery object of the header
    var $h2   = $(h2);
    // Link will be an <a> with the same text as the heading, and will link to its id
    var $link = $('<a>').text($h2.text()).attr('src', '#' + h2.id);
    // Add this link to the collection
    $links = $links.add($link);
});

所以现在$links包含您的目录。假设您想在 之后插入这些链接<h1>，您将执行以下操作：

$links.insertAfter('h1');

……当然，此时你可以对他们做任何你想做的事。