使用jQuery自动编号标题H1-H6 [英] Automatic Numbering of Headings H1-H6 using jQuery
本文介绍了使用jQuery自动编号标题H1-H6的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我阅读了相关帖子,但没有找到针对IE的解决方案,所以我为这个问题寻求一个jQuery解决方案:
我有一些像这样的嵌套层级标题
< H1>标题1< / h1>
< h2>副标题1< / h2>
< h1>标题2< / h1>
< h2>副标题1< / h2>
< h2>副标题2< / h2>
我需要这样的自动标题输出:
1。标题1
1.2副标题1
2.标题2
2.1。副标题1
2.2。 subjading 2
有没有办法通过jQuery或类似方式来实现这一点,在IE6 +中工作?
解决方案
另一种可能性
var indices = [];
函数addIndex(){
// jQuery将以文档顺序给出所有HN
jQuery('h1,h2,h3,h4,h5,h6')。 (function(i,e){
var hIndex = parseInt(this.nodeName.substring(1)) - 1;
//刚刚找到一个levelUp事件
if( indices.length - 1> hIndex){
indices = indices.slice(0,hIndex + 1);
}
//刚刚找到一个levelDown事件
if(indices [hIndex] == undefined){
indices [hIndex] = 0;
}
//当前级别的count + 1
indices [ hIndex] ++;
//显示层次结构中的完整位置
jQuery(this).prepend(indices.join(。)++ this.tagName);
});
jQuery(document).ready(function(){
addIndex();
});
I read related posts, but didn't find a solution for IE, so I ask for a jQuery-solution for this problem:
I've some nested hierarchical Headings like this
<h1> heading 1</h1>
<h2> subheading 1</h2>
<h1> heading 2</h1>
<h2> subheading 1</h2>
<h2> subheading 2</h2>
I need some automated headings output like this:
1. heading 1
1.2 subheading 1
2. heading 2
2.1. subheading 1
2.2. subheading 2
Is there a way how this can be achieved using jQuery or alike, working in IE6+?
解决方案
another possibility
var indices = [];
function addIndex() {
// jQuery will give all the HNs in document order
jQuery('h1,h2,h3,h4,h5,h6').each(function(i,e) {
var hIndex = parseInt(this.nodeName.substring(1)) - 1;
// just found a levelUp event
if (indices.length - 1 > hIndex) {
indices= indices.slice(0, hIndex + 1 );
}
// just found a levelDown event
if (indices[hIndex] == undefined) {
indices[hIndex] = 0;
}
// count + 1 at current level
indices[hIndex]++;
// display the full position in the hierarchy
jQuery(this).prepend(indices.join(".")+" "+this.tagName);
});
}
jQuery(document).ready(function() {
addIndex();
});
这篇关于使用jQuery自动编号标题H1-H6的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文