javascript - 使用 JavaScript 查找下一个标题的标记名和索引

Question

我正在为每个标题使用 JavaScript/jQuery 寻找下一个标题标记名和索引。例如，如果第一个标题是 h1，第二个是 h2，第三个是 h1，并且您在第二个 h2 上执行函数，您将获得标记名 h1 和索引 1(从 0 开始)，因为它是第二个 h1 .这是我的代码。奇怪的是，它总是将 h2 作为标记名，将 0 作为索引!

$("h1, h2, h3, h4, h5, h6").each(function(index){
    var nexth = $(this.tagName.toLowerCase() + "~ h1, h2, h3, h4, h5, h6")[0];
    var nexthtagname = nexth.tagName.toLowerCase();
    var nexthindex = $(nexthtagname).index(nexth);
    alert("Tag Name: " + nexthtagname + ", Index: " + nexthindex);
});

这是一些测试 html:

<h1>Header 1</h1>
<p>Test</p>
<h2>Header 1.1</h2>
<p>Test</p>
<h3>Header 1.1.1</h3>
<p>Test</p>
<h3>Header 1.1.2</h3>
<h2>Header 1.2</h2>
<p>Test</p>
<h1>Header 2</h1>
<p>Test</p>
<h4>Header 2.0.0.1</h4>

提前致谢!

Answer 1

问题是您的选择器变成了 $("h2 ~ h1, h2 ...") —— 您实际上想使用元素本身来获取下一个元素类型:

var nexth = $(this).nextAll("h1, h2, h3, h4, h5, h6").first()[0];

据我所知，jQuery 没有“next of type”的方法，但我可能是错的。使用 $(this).next('h1, h2...') 将不起作用，因为这需要下一个兄弟项在该过滤器中。 nextAll 将查看所有后续兄弟，但您只想要下一个(因此 first)。您的索引代码显示正确。见:

http://jsfiddle.net/wTubu/

请注意，这将导致最后一个元素出错；您可以检查 .nextAll 是否有长度，或者 next 是否未定义。