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是否有长度，或nexth是否未定义。

Answer 2

不要让它如此复杂。您已按文档顺序拥有有效的标题集合了！

var headings = $("h1, h2, h3, h4, h5, h6").get();
for (var i=0; i<headings.length-1; i++) {
    var cur = headings[i],
        next = headings[i+1];
     … // get tag name etc
}

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

2 个答案: