Question

I have a 6 divs in a html doc that have the following characteristics:

<div id="m1_1"  title="Sept. 05, 2011" class="eheader">MR 1 &#151;</div>
<div id="m1_8"  title="Sept. 05, 2011" class="eheader">MR 8 &#151;</div>
<div id="m1_12" title="Sept. 05, 2011" class="eheader">MR 12 &#151;</div>
<div id="m1_16" title="Sept. 12, 2011" class="eheader">MR 16 &#151;</div>
<div id="m1_17" title="Sept. 12, 2011" class="eheader">MR 17 &#151;</div>
<div id="m1_19" title="Sept. 15, 2011" class="eheader">MR 19 &#151;</div>       

Their id’s are something like m1_1, m1_2, m1_3, m1_4, m1_5 and m1_6. The numerical digits after the underscore are generated dynamically so I can’t directly target say… “m1_8”.

They all share the same class which is unique to the group. In my css I’m setting the display property for divs of this class to “hidden” or “none”.

They all have a title element which is set to the date they were created.

What I need is a function that will loop through the divs by class name and target all of the unique titles and the first member of any duplicate titles. In the above example, m1_19 would be targeted because its title (create date) is unique to the set. divs m1_1 and m1_16 would also be targeted because they are the first members of duplicates.

My function outline looks like this… of course there’s a huge chunk of logic missing and I’m not even sure I set up the loop correctly. Can this be done or am I on the wrong track completely?

function checkHeaders(){
    var hdrSet = document.getElementsByClassName("eheader");

    for (var i=0; i<hdrSet.length; i++){
        if (hdrSet[i].title {
            hdrSet[i].style.display = "block";
        }
    }

}

Answer 1

function checkHeaders(){
    var hdrSet = document.getElementsByClassName("eheader");
    var titles = {};

    for (var i=0; i<hdrSet.length; i++){
        if ( !titles[ hdrSet[i].title ] )  {
            titles[ hdrSet[i].title ] = true;
            hdrSet[i].style.display = "block";
        }
    }
}