Question

I have a bunch of divs sprinkled throughout a long article. Each one, when clicked, shows a span of hidden text within the div. They’re made up of

1) chapter title
2) section number
3) point number

eg: government 3:15 OR whitehouse 15:27 OR legislation 1:38 (there are over 90 chapters).

Using jQuery, i’m trying to see if a chapter title occurs two or more times in a row, if it does, apply a specific class to every one except the first.

Reason being: when referencing these chapter titles, i’ve placed an icon at the beginning:

eg: (icon)Whitehouse 29:8, but I don’t want every single chapter title to have an icon, if that chapter title is referenced two or more times before another chapter title is referenced, then I want the second third forth(etc.) to not have the icon.

Does anyone know how I would go about checking to see if the Chapter Title has been referenced two or more times before a different Chapter Title is referenced?

example:

He spoke of the many injustices in (icon)Whitehouse 3:15, but the president wasn’t speaking of mountains whitehouse 4:2 and whitehouse 4:9. When he saw they were ready to begin (icon)congress 19:4, he said “welcome all to this session” (icon)legislation 9:41, then smacked the prime minister in the face legislation 3:8

Answer 1

Encapsulate all references in a set of span tags (or any other container) with a common attribute, but in this case let’s say span.ref.

I’ve got a basic version of it as the following jsFiddle.

The HTML required for each chapter title requires the following format:

<span class="ref">
    <img src="..." />
    <span class="ref-title">Washington</span>
    1:23
</span>

Then use the following jQuery to update the page:

$(document).ready(function(){

    // var to store the previous reference title
    var previousRefTitle = '';

    // cycle through each reference on the page
    $('.ref').each(function(){

        // if chapter title is the same as the previous reference
        if ($(this).children('.ref-title').text() == previousRefTitle)
        {
            // change the class
            if ($(this).hasClass('ref'))
            {
                $(this).removeClass('ref');
                $(this).addClass('ref-following');    
            }
        }

        // if chapter title is new compared to the previous reference
        else
        {
            // update var for next iteration
            previousRefTitle = $(this).children('.ref-title').text();
        }
    });

});