选择并显示其自己的div内的所有h2元素

Question

所以我有这个jQuery的：

    var all = document.getElementsByTagName("h2");

    for (var i=0, max=all.length; i < max; i++) {
        $("h1").after($(all).html());
    }

我正在尝试在页面上选择h2元素，但似乎只找到它们中的第一个，然后发布三次。

这是HTML：

        <h1>Oversigt</h1>
    <div class="slide">
        <h2>trin 1</h2>
        <p>Tekst til afsnit 1.</p>
    </div>
    <div class="slide">
        <h2>trin 2</h2>
        <p>Tekst til afsnit 2.</p>
    </div>
    <div class="slide">
        <h2>trin 3</h2>
        <p>Tekst til afsnit 3.</p>
    </div>

这是JSFiddle上代码的链接

我想做的是在h1元素后发布每个div的每个标题，以便页面显示：Oversigt Trin 1 Trin 2 Trin 3

Answer 1

你忘了使用i 。 同样由于您尝试执行此操作，您的元素将被颠倒。 这是我的建议

            for (var max = all.length, i = max; i > 0; i--) {
                $("h1").after($(all[i - 1]).html());
            }

演示： http : //jsfiddle.net/3FLxu/

编辑：这看起来更干净，但要么工作

            for (var max = all.length, i = max - 1; i >= 0; i--) {
                $("h1").after($(all[i]).html());
            }

Answer 2

尝试以下操作：

var $all = $("h2");
$all.each(function() { $("h1").after($(this).html()) });

我认为您误解了集合在jQuery中的工作方式。 第一个被多次显示的原因是因为循环多次调用该方法，但是.html()一次只能从集合中的一个元素中获取HTML。 这样，它不会抛出错误，而只是从集合中的第一个元素中获取HTML。

您还可以使用@Joseph Marikle在其评论中给出的以下内容：

var all = document.getElementsByTagName("h2");

for (var i=0, max=all.length; i < max; i++) {
    $("h1").after($(all[i]).html());
}

这与您提供的代码更相似，但是两者都做相同的事情。