定位獨特，第一重複成員

Question

我有一個HTML文檔6周的div具有以下特點：

<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>  

他們的ID是像m1_1，m1_2，m1_3，m1_4，m1_5和m1_6 。下劃線後面的數字是動態生成的，所以我不能直接指定......「m1_8」。

它們都共享同一個班級，這對班組來說是獨一無二的。在我的CSS中，我將這個類的div的display屬性設置爲「hidden」或「none」。

它們都有一個標題元素，它被設置爲創建日期。

我需要的是一個函數，它將按照類名稱循環遍歷div，並定位所有唯一標題和任何重複標題的第一個成員。在上面的例子中，m1_19將被定位，因爲它的標題（創建日期）對於該集合是唯一的。 divs m1_1和m1_16也將成爲攻擊目標，因爲它們是重複的第一個成員。

我的功能大綱看起來像這樣......當然還有大量的邏輯丟失，我甚至不確定我是否正確設置了循環。這可以完成，還是我完全在錯誤的軌道上？

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"; 
     } 
    } 
} 

Answer 2

function checkHeaders(){ 
    var hdrSet = document.getElementsByClassName("eheader"); 
    var prevTitle = ''; 
    for (var i=0; i<hdrSet.length; i++){ 
     if (hdrSet[i].title) { 
      if ($prevTitle != hdrSet[i].title) { 
       hdrSet[i].style.display = "block"; 
      } 
      $prevTitle = hdrSet[i].title; 
     } 
    } 
} 

Answer 3

我想這是你所追求的：

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

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

checkHeaders(); 

例子：http://jsfiddle.net/Vk7Ud/

說明

var hdrSet = document.getElementsByClassName("eheader"); 
//grab all the divs 

var title; 
//set a variable to contain the titles 

for(var i=0; i<hdrSet.length; i++){ 
//for each div 

    if(title != hdrSet[i].title){ 
    //if the title does not match the one that is set, continue 
    //(first one is always fine, as nothing is set) 

     title = hdrSet[i].title; 
     //then set the latest title to title 

     hdrSet[i].style.display = 'block'; 
     //display the div 
     } 
    } 
} 

checkHeaders();