Geek Answers Handbook

Automatic H1-H6 Header Numbering Using jQuery

I read related posts, but did not find a solution for IE, so I am asking for a jQuery solution for this problem:

I have nested hierarchical headers 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 automatic headers, for example:

 1. heading 1 1.2 subheading 1 2. heading 2 2.1. subheading 1 2.2. subheading 2

Is there a way this can be achieved with jQuery or similar, working in IE6 +?

+7
source share
5 answers

another opportunity

 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(); });
+3
source

Here is my example:

 var segments = []; $(':header').each(function() { var level = parseInt(this.nodeName.substring(1), 10); if(segments.length == level) { // from Hn to another Hn, just increment the last segment segments[level-1]++; } else if(segments.length > level) { // from Hn to Hn-x, slice off the last x segments, and increment the last of the remaining segments = segments.slice(0, level); segments[level-1]++; } else if(segments.length < level) { // from Hn to Hn+x, (should always be Hn+1, but I'm doing some error checks anyway) // add '1' x times. for(var i = 0; i < (level-segments.length); i++) { segments.push(1); } } $(this).text(segments.join('.') + '. ' + $(this).text()); });

Working example at all levels, H1 - H6

+4
source

Honestly, the problem will be solved after we get all the <h2> tags following each <h1> and immediately before the next <h1> , right?

This code did it and works great

 $("h1").each(function(mainHeadIndex) { // Numbering the main heads $(this).html(mainHeadIndex +1 +'. ' + $(this).html()); // Find all the h2 tags right under this particular main head $(this).nextUntil("h1").filter("h2").each(function(subIndex) { // calculate the right sub head number var newSubIndex = subIndex+1; // Numbering the sub heads $(this).html(mainHeadIndex +1 +'.'+ newSubIndex +$(this).html()); }); })

you can check it by this link

PS: thank you MatejB, I did not know jsfiddle.com before your message :)

+1
source

This works for me:

  var i = 0;
 var j = 0;
 $ ('h1'). each (function (index, element) {
     i ++;
     $ (element) .text (i + '.' + $ (element) .text ());

     j is 1;
     $ (element) .nextUntil ('h1'). each (function (subindex, subelement) {
         if (! $ (this) .is ('h2')) return;  // so subelements other than h2 can be left alone
         j ++;
         $ (subelement) .text (i + '.' + j + '.' + $ (subelement) .text ());
     });
 });

Woking example in jsfiddle .

0
source


I think you should wrap the H2 subtitles in a DIV, and then use the following code:

  $ (document) .ready (function () {
     var result = 0;
     $ ('h1'). each (function (index) {
         $ (this) .text ((index + 1) + '.' + $ (this) .text ());
         var saveIndexNum = index + 1;
         $ (this) .next (). find ('h2'). each (function (index) {
             $ (this) .text (saveIndexNum + '.' + (index + 1) + '' + $ (this) .text ());
         });
     });
 });

try it


 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function() { var result = 0; $('h1').each(function(index) { $(this).text((index + 1) + '. ' + $(this).text()); var saveIndexNum = index + 1; $(this).next().find('h2').each(function(index) { $(this).text(saveIndexNum + '.' +(index + 1) + ' ' + $(this).text()); }); }); }); </script> <style> h1 { color:red; } .subheading h2 { color:green; } .subheading { background:#e2e2e2; } </style> </head> <body> <h1> heading 1</h1> <div class="subheading"> <h2> subheading 1.1</h2> </div> <h1> heading 2</h1> <div class="subheading"> <h2> subheading 2.1</h2> <h2> subheading 2.2</h2> <h2> subheading 2.3</h2> <h2> subheading 2.4</h2> <h2> subheading 2.5</h2> </div> <h1> heading 3</h1> <div class="subheading"> <h2> subheading 3.1</h2> <h2> subheading 3.2</h2> </div> <h1> heading 4</h1> <div class="subheading"> <h2> subheading 4.1</h2> <h2> subheading 4.2</h2> </div> </body></html>
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function() { var result = 0; $('h1').each(function(index) { $(this).text((index + 1) + '. ' + $(this).text()); var saveIndexNum = index + 1; $(this).next().find('h2').each(function(index) { $(this).text(saveIndexNum + '.' +(index + 1) + ' ' + $(this).text()); }); }); }); </script> <style> h1 { color:red; } .subheading h2 { color:green; } .subheading { background:#e2e2e2; } </style> </head> <body> <h1> heading 1</h1> <div class="subheading"> <h2> subheading 1.1</h2> </div> <h1> heading 2</h1> <div class="subheading"> <h2> subheading 2.1</h2> <h2> subheading 2.2</h2> <h2> subheading 2.3</h2> <h2> subheading 2.4</h2> <h2> subheading 2.5</h2> </div> <h1> heading 3</h1> <div class="subheading"> <h2> subheading 3.1</h2> <h2> subheading 3.2</h2> </div> <h1> heading 4</h1> <div class="subheading"> <h2> subheading 4.1</h2> <h2> subheading 4.2</h2> </div> </body></html>
0
source

More articles:


All Articles