突出重複字符串

我最多有三個幾乎相同的div包含用戶名錶。有些名字可能在三個div中重複。我想強調重複的名稱。用戶的第一次出現不應該着色，第二次出現應該有橙色背景，第三次應該有紅色背景。 divs從左到右依次排列，以便第一個div不應該有突出顯示的用戶名。突出重複字符串

我的HTML看起來像：

<div class="col-md-4"> 
    <table class="table table-striped"> 
     <tr> 
      <th>2/26/2014</th> 
     </tr> 
     <tr> 
      <td>user1</td> 
     </tr> 
     <tr> 
      <td>user2</td> 
     </tr> 
     <tr> 
      <td>user5</td> 
     </tr> 
     <tr> 
      <td>user17</td> 
     </tr> 
    </table> 
</div> 

<div class="col-md-4"> 
    <table class="table table-striped"> 
     <tr> 
      <th>2/27/2014</th> 
     </tr> 
     <tr> 
      <td>user13</td> 
     </tr> 
     <tr> 
      <td>user5</td> 
     </tr> 
     <tr> 
      <td>user7</td> 
     </tr> 
    </table> 
</div> 

<div class="col-md-4"> 
    <table class="table table-striped"> 
     <tr> 
      <th>2/28/2014</th> 
     </tr> 
     <tr> 
      <td>user5</td> 
     </tr> 
     <tr> 
      <td>user45</td> 
     </tr> 
     <tr> 
      <td>user1</td> 
     </tr> 
    </table> 
</div>

我知道用戶名錶單元格將與$('table.table td')被選中（如果我使用jQuery），但我不知道從那裏做。

如果您有任何問題，請讓我知道。

謝謝。

來源

2014-03-04 585connor

你可以發佈你的任何當前代碼，你有問題，所以我們可以看看爲什麼它可能不工作？我假設你至少有一些基本的代碼循環通過divs /表或類似的？ – Nope

這就是我必須展示的，實際上。我不知道如何循環遍歷每個表格並比較內容。 – 585connor

我相信我弄明白了。在下面檢查我的答案。謝謝。 –

這是你嗎想？

enter image description here

我創建了一個地圖存儲文本現對。每次文本重複時，與其關聯的計數器都會增加。如果計數器爬升到某個值，背景將被設置爲另一種顏色。試一試！

DEMO

var map = new Object(); 

$('td').each(function() { 
    var prop = $(this).text() 
    var bgColor = '#FFFFFF'; 

    if (map[prop] > 1) { 
     bgColor = '#FF0000'; 
    } else if (map[prop] > 0) { 
     bgColor = '#FF7F00'; 
    } 

    $(this).css('background', bgColor); 

    if (map.hasOwnProperty(prop)) { 
     map[prop]++; 
    } else { 
     map[prop] = 1; 
    } 
});

來源

2014-03-04 23:37:19

謝謝！這工作 – 585connor

+1多數民衆贊成真棒 – andrew

你可以嘗試這樣的事情，但我沒有測試它

$('td').each(function(){ 
    var text = this.html(); 
    $('td:contains("'+text+'"):nth-child(2)').css({'background':'orange'}); 
    $('td:contains("'+text+'"):nth-child(3)').css({'background':'red'}); 
});

編輯：

不是特別優雅，但它似乎工作

http://jsfiddle.net/63L7L/1/

var second = []; 
var third = []; 
$('td').each(function(){ 
    var text = $(this).html(); 
    second.push($("td").filter(function() { 
    return $(this).text() === text; 
})[1]) 
    third.push($("td").filter(function() { 
    return $(this).text() === text; 
})[2]) 
}); 

    $(second).each(function(){ 
    $(this).css({'background':'red'}); 
    }); 

    $(third).each(function(){ 
    $(this).css({'background':'orange'}); 

});

來源

2014-03-04 23:17:56 andrew

就是這樣的：'var text = $（this）.text（）;'不，它不起作用。 –

是的，這似乎不起作用。 – 585connor

請參閱編輯 – andrew

使用純JavaScript（ECMA5）

CSS

.orange { 
    background-color:orange; 
} 
.red { 
    background-color:red; 
}

的Javascript

Array.prototype.forEach.call(document.querySelectorAll('.table-striped td'), function (td) { 
    var textContent = td.textContent; 

    if (this.hasOwnProperty(textContent)) { 
     td.classList.add(++this[textContent] === 2 ? 'orange' : 'red'); 
    } else { 
     this[textContent] = 1; 
    } 
}, {});

對jsFiddle

來源

2014-03-05 00:07:29 Xotic750

突出重複字符串

回答

相關問題