CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dogenymous
Dogenymous

Reputation: 33

If a div contains a specific string of text, change background-color

Look

I'd love some help with a simple jQuery script that searches for a specific string of text. If that text exists, then manipulate the containing div's css.

The HTML+CSS+JS would look like:

$(".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>

Why won't the Assigned div background-color change to green ? What am i missing ? Will help me a lot if someone can point me in right direction.

Upvotes: 2

Views: 938

Answers (2)

Mamun
Mamun

Reputation: 68933

ng-cell is not the class of the element, you can try using attribute selector. Also there is no a element which you are looking through the selector, it is the span element you are looking for. Please note, if you want to refer an element with multiple classes please remove the spaces between them:

$(".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>

Upvotes: 3

Brandon Gano
Brandon Gano

Reputation: 6720

The first issue is with your selector. It's very specific and targeting elements that don't exist. The second issue is your call to closest, which is looking for a parent with a class of "ng-cell" instead of an attribute. This seems to work:

$(".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>

Upvotes: 3

Related Questions