Append count() to Div/class

[danIT]

I have some HTML:

<div class="header">School Logo</div>
<div class="content">
some text
</div>

<div class="header">School Logo</div>
<div class="content">
some text
</div>

It repeats through the webpage putting a header div in to show the school logo. This is basically a very simple way of printing letter heads with content generated inside each "content" div.

What I want to be able to do is print the First occurance of "header" but when multiple occurances of "header" are on the page I want it to ignore them all but the first one.

What i would like to do is to add some javascript which will add a count to the div,

<div class="header COUNT1">School Logo</div>
<div class="content">
some text
</div>

<div class="header COUNT2">School Logo</div>
<div class="content">
some text
</div>

And when the COUNT > 1 make "Header" invisible:

.header {
display: none; (Or similar)
}

Can anyone help?

[kesomir]

Why can't you just output one such div?

What are you using to create the multiple divs?

[danIT]

The webpage is create like so:

Header

----

Content (This html here is generated dynamically whereas header is hard coded)

--

Footer

But each letter calls the Header when it gets generated so you end up with multiple headers on a single page.

Trouble is the header html does not get parsed so i cant do anything dynamic there, E.g generate a count based on how many letters are to be printed and only print the header based on that number.

Would it be possible to count the number of 'Header's put them into an array with a count and output that value back to the class on page load?

[PaulBM]

Do you use a separate CSS file for printing?

I'd add a second class for the all the headers that you don't want printed.

<div class="header">School Logo</div>
<div class="content">
some text
</div>

<div class="header noprint">School Logo</div>
<div class="content">
some text
</div>
<div class="header noprint">School Logo</div>
<div class="content">
some text
</div>

Then in the CSS for printer...

.noprint {
display:none;
}

That's how I hide any items from the screen that I don't want printed.

I'm not sure if you can do this though, can you give us more information on how the page is generated?