jquery addclass in inested <td>

Question

Я пытаюсь сделать условное форматирование в списке SharePoint с помощью jquery. Проблема в том, что SharePoint добавляет кучу нежелательной информации при размещении кода на странице SharePoint. Я пытаюсь условно выделить определенные ячейки с определенным текстом в таблице. Красный = красный фон, зеленый = зеленый фон.

Проблема, с которой я столкнулась, связана с тем, что моя таблица завернута в другую таблицу (у меня нет контроля над этим), и я ищу текст с помощью td, родительского td получает также стиль. Я просто хочу, чтобы стиль td с текстом в нем.

У меня есть codepen показывая, что я сделал: http://codepen.io/Gregc72/pen/NdmoXj

HTML

<table> 
<tr> 
    <td> 
<table>  
<tr><td>Test 1</td><td>Red</td></tr> 
<tr><td>Test 2</td><td>Green</td></tr>  
</table> 
</tr></td><table> 

CSS

.greenBg { 
    background: green; 
} 
.redBg { 
    background: red; 
} 

Script

$("td:contains('Green')").addClass('greenBg'); 
$("td:contains('Red')").addClass('redBg'); 

Я не знаю, могу ли я отформатировать свой селектор css по-другому, чтобы выполнить это, или если мне нужно использовать какую-то функцию циклирования. Я уверен, что ответ очень прост, и я просто не замечаю этого.

Answer 1

Это может быть хорошей идеей использовать filter() функцию

PEN

$("td").filter(
    function (index) { return $(this).text() == "Red"; } 
).addClass("redBg"); 

$("td").filter(
    function (index) { return $(this).text() == "Green"; } 
).addClass("greenBg"); 

Answer 2

Если это ваша структура исправить, то попробуйте следующее:

$("table tr td table tr td:contains('Green')").addClass('greenBg'); 
$("table tr td table tr td:contains('Red')").addClass('redBg');