Если div содержит указанную c строку текста, измените цвет фона

Question

Я бы хотел немного помочь с простым jQuery скриптом, который ищет определенную c строку текста. Если этот текст существует, тогда манипулируйте содержащим div'ом css.

. HTML + CSS + JS будет выглядеть так:

$(".ng-cell .ngCellText ng-scope col8 colt8 a:contains('Assigned')").each(function(i , v){
    $(this).closest(".ng-cell").css("background-color" , "green");
});

.ng1582937649646 .colt8 {
    width: 140px;
}
.ng1582937649646 .col8 {
    width: 140px;
    left: 1175px;
    height: 40px;
}
.ngCellText, .ngCenteredCellText {
    padding: 0 5px 0 10px;
    line-height: 40px;
    font-size: 14px;
    font-family: OpenSansLight,OpenSans,Helvetica;
    text-transform: none;
}
.ngCellText, .ngCenteredCellText, .ngHeaderText {
    padding-left: 10px;
    line-height: 35px;
    font-size: 14px;
}
.ngCellText {
    padding: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">In Progress</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>

Почему цвет фона Назначенного элемента div не изменится на зеленый? Что мне не хватает? Очень поможет мне, если кто-то может указать мне правильное направление.

Answer 1

ng-cell не является классом элемента, вы можете попробовать использовать селектор атрибута . Также нет элемента a, который вы просматриваете через селектор, это элемент span, который вы ищете. Обратите внимание: если вы хотите сослаться на элемент с несколькими классами, удалите пробелы между ними:

$(".ngCellText.ng-scope.col8.colt8 span:contains('Assigned')").each(function(i , v){
  $(this).closest("[ng-cell]").css("background-color" , "green");
});

//OR: simply using the single class
/*
  $(".ngCellText span:contains('Assigned')").each(function(i , v){
    $(this).closest("[ng-cell]").css("background-color" , "green");
  });
*/

.ng1582937649646 .colt8 {
    width: 140px;
}
.ng1582937649646 .col8 {
    width: 140px;
    left: 1175px;
    height: 40px;
}
.ngCellText, .ngCenteredCellText {
    padding: 0 5px 0 10px;
    line-height: 40px;
    font-size: 14px;
    font-family: OpenSansLight,OpenSans,Helvetica;
    text-transform: none;
}
.ngCellText, .ngCenteredCellText, .ngHeaderText {
    padding-left: 10px;
    line-height: 35px;
    font-size: 14px;
}
.ngCellText {
    padding: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
  <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
  <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
  <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
  <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">In Progress</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
  <div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
  <div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>

Answer 2

Первая проблема с вашим селектором. Это очень специфично c и нацеливание на несуществующие элементы. Вторая проблема - ваш вызов closest, который ищет родителя с классом «ng-cell» вместо атрибута. Кажется, это работает:

$(".ngCellText span:contains('Assigned')").each(function(i , v){
    $(this).closest("[ng-cell]").css("background-color" , "green");
});

.ng1582937649646 .colt8 {
    width: 140px;
}
.ng1582937649646 .col8 {
    width: 140px;
    left: 1175px;
    height: 40px;
}
.ngCellText, .ngCenteredCellText {
    padding: 0 5px 0 10px;
    line-height: 40px;
    font-size: 14px;
    font-family: OpenSansLight,OpenSans,Helvetica;
    text-transform: none;
}
.ngCellText, .ngCenteredCellText, .ngHeaderText {
    padding-left: 10px;
    line-height: 35px;
    font-size: 14px;
}
.ngCellText {
    padding: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">In Progress</span></div></div>
</div>

<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell  col8 colt8" style="cursor: pointer;">
	<div class="ngVerticalBar ngVerticalBarVisible" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }" style="height: 40px;">&nbsp;</div>
	<div ng-cell=""><div class="ngCellText ng-scope col8 colt8" ng-class="col.colIndex()"><span ng-cell-text="" class="ng-binding">Assigned</span></div></div>
</div>