using :nth-child to select lines and append

Question

I am doing a university project at the minute where I feed information in from a set xml file and then place it into a set div using jQuery as individual paragraphs.

At the moment, what is being fed in is something like this:

<p class="speech">Blah</p>
<p class="line">Blah</p>
<p class="line">Blah</p>
<p class="line">Blah</p>
<p class="line">Blah</p>
<p class="speech">Blah</p>
<p class="line">Blah</p>

Etc.

One of the requirements of the module is to number every 5th line, which I thought would be easiest done by using something like:

$("#contents_txt p:nth-child(5n)").append("<span> - 5th</span>");

However instead of adding "5th" to the end of each 5th line it is adding it multiple times:

COUNTESS

In delivering my son from me, I bury a second husband.

BERTRAM

And I in going, madam, weep o'er my father's death

anew: but I must attend his majesty's command, to - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th - 5th

I can't figure out why this is happening, because if I change to something like the .css selector, I can apply style to every 5th line fine.

Any help would be greatly appreciated!

Thanks in advance!

EDIT

I have made a jsfiddle of it: http://jsfiddle.net/LfpMm/ however it seems to be working in a barebones environment.

A working example on my end is available: http://immbudden.com/siab/siab.html

In order to see what I mean: click on a play, click on the contents nav, click on a scene and you'll see whats happening.

Thanks.

Answer 1

Looking at your localscripts.js file. On this line

$(this).find("LINE").each(function(){
    $("#contents_txt").append("<p class='line'>"  + $(this).text() + "</p>");
    $("#contents_txt p:nth-child(5n)").append("<span> - 5th</span>");
});

Maybe move that second append out of the .each function so

$(this).find("LINE").each(function(){
    $("#contents_txt").append("<p class='line'>"  + $(this).text() + "</p>");
});

    $("#contents_txt p:nth-child(5n)").append("<span> - 5th</span>");