如果 div 包含特定的文本字符串，請更改 background-color

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 背景顏色不會變為綠色？ 我錯過了什么？ 如果有人能指出我正確的方向，我會很有幫助。

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>

Answer 2

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>