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+?
On
This works for me:
var i = 0;
var j = 0;
$('h1').each(function(index, element){
i++;
$(element).text(i + '. ' + $(element).text());
j = 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());
});
});
On
honestor, simply speaking, the problem will be solved once we can get all the <h2> tags that follows right after every <h1> tag and just before the next <h1> tag, right ?
This code has made it and working just fine
$("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());
});
})
P.S: thanks for you MatejB, I didn't know jsfiddle.com before your post :)
On
Here's my take on it:
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());
});
I think you should wrap H2 subheadings in DIV 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());
});
});
});
<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>
another possibility