javascript - 如果 div 包含特定的文本字符串，则更改背景颜色

Question

我想要一个搜索特定文本字符串的简单 jQuery 脚本的帮助。如果该文本存在，则操作包含 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 背景色不会变为绿色？我错过了什么？如果有人能指出我正确的方向，将对我有很大帮助。

标签： javascriptjqueryhtmlcss

Answer 1

第一个问题是您的选择器。它是非常具体和不存在的目标元素。第二个问题是您对 的调用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>