我正在寻找下一个标题标签名和索引,每个标题都有JavaScript/jQuery。例如,如果第一个标题是 h1,第二个是 h2,第三个是 h1,并且您在第二个 h2 上执行了函数,您将获得 tagname 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>
提前谢谢你!
问题是你的选择器变得$("h2 ~ h1, h2 ...")
- 你想实际使用元素本身来获取下一个元素类型:
var nexth = $(this).nextAll("h1, h2, h3, h4, h5, h6").first()[0];
据我所知,jQuery没有"下一个类型"的方法,但我可能是错的。 使用 $(this).next('h1, h2...')
将不起作用,因为这需要下一个同级在该过滤器中。 nextAll
将查看所有以下兄弟姐妹,但您只想要下一个(因此first
)。 索引代码显示正确。 看:
http://jsfiddle.net/wTubu/
请注意,这将导致最后一个元素出错;你可以检查.nextAll
是否有长度,或者nexth
是否未定义。
不要让它变得那么复杂。您已经有一个按文档顺序排列的有效标题集合!
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
}