Modify the background color of a div when it contains a particular string of text

https://i.sstatic.net/Ab5S9.png

Looking for assistance with a basic jQuery script that can search for a specific text string. If the text is found, I want to change the CSS of the containing div.

The HTML+CSS+JS code would be 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 is the background color of the Assigned div not changing to green? Can someone point me in the right direction?

javascriptjqueryhtmlcss

Answer №1

Your selector is overly specific and targeting nonexistent elements, which is the first issue. The second problem lies in your use of closest, as it is searching for a parent with a class of "ng-cell" instead of an attribute. Try this modified code snippet:

$(".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 is not the class assigned to the element, you should use an attribute selector instead. Additionally, you are targeting a span element, not an a element with your selector. Keep in mind that when referencing elements with multiple classes, 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Antonio Mele's latest book on Django3 and Ajax Button Development

After clicking the like button, it shows a count of 2099 instead of 1. However, after refreshing the page, it displays the correct count of 1. The same issue occurs when unliking. The count is accurate only after a refresh, otherwise, it randomly shows eit ...

jquerydjangoajaxdjango-viewsdjango-ajax-selects

Despite the fact that wp_mail is returning true, emails are not being received

Despite wp_mail() returning true, I am not receiving any emails that are submitted through the contact form on my WordPress blog. I even attempted to change the email address from Gmail to Hotmail with no success. Ajax code in the contact template $(&apo ...

phpjqueryajaxwordpressemail

How about: "What about Using Percentage-Based Image Holders?"

I'm wondering if it's possible to use a placeholder with percentages instead of pixels. I know there's code that allows for pixel dimensions, but is there a way to use percentages? Currently, the code for the placeholder is img src="http://p ...

htmlcssimageplaceholderwireframe

What is the best way to manage the loading and unloading of JavaScript within dynamically loaded partial pages?

Utilizing jQuery and history.js, I manage seamless transitions between partial pages to prevent entire document reloads. Some of these partial pages include unique javascript files. Despite successful page transitions, remnants of executed javascript linge ...

javascriptjqueryajaxhistory.js

The $OnChange function fails to activate when passing an object by reference

Hi there, I've encountered a problem in my code that I'd like some help with. In my example, I have two components: Parent Component and Child Component. Both components share a field called rules. The Parent Component passes the rules field to ...

javascriptangularjsajax

Converting HTML tables into R

I have a series of HTML files with static content containing tables. I need to extract a specific column (4th column) from each table. I am currently using R to extract the tables from the HTML, but it seems like the rows are being combined for that partic ...

htmlrscreen-scrapinghtml-table

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

One way to enhance user experience is by passing parameters dynamically from the database when an element is clicked. This allows for the retrieval of

Earlier, I tried to post a question but couldn't get it working due to incorrect code. As the title suggests, my objective is to retrieve data from a database and display it in a div. The idea is that when this data is clicked, it should be passed to ...

phpjavascriptajaxjquery

Are There Data Racing Issues in JavaScript?

Imagine executing the following code snippet. let score = 0; for (let i = 0; i < some_length; i++) { asyncFunction(i, function() { score++; }); // incrementing callback function } The code above may potentially lead to a data race issue where two ...

javascriptnode.jsmultithreadingrace-condition

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

Seeking advice on implementing basic validation for a newsletter form that only requires an email address. The current page layout doesn't allow space for jQuery error messages, so I attempted to use the HTML 5 required attribute. However, the form st ...

javascriptjqueryajaxhtmlforms

Revise shiny datatable to display total column sum differently

This is a follow up question to this inquiry: Adding Total/Subtotal to the bottom of a DataTable in Shiny. Below is the code snippet referenced: library(shiny) library(DT) ui <- shinyUI(fluidPage( h1('Testing TableTools'), mainPanel( ...

javascriptrshiny

Ensure that the button becomes clickable only after text has been inputted into the field

How can I make my button active after entering text into the text box? I would appreciate any help or guidance. Here is the code I have been working on: <body> <script> function ActivateButton() { if (input1.value != null) { send ...

javascripthtml

Issue with Snackbar slide transition not functioning properly in mui 5

Transitioning from material-ui 4 to mui 5 has presented me with a challenge. Whenever I try to display my snackbar, an error pops up in the console. After some investigation, I realized that the issue lies within the Slide component that I'm using as ...

javascriptreactjsmaterial-ui

While it includes a new section, it fails to refresh the navbar

Upon clicking the button to add a new section, the section gets added successfully. However, the navbar does not get updated as expected. It should dynamically update the navbar to display both the existing sections and the new section added using JavaScri ...

javascripthtmlcssarraysdynamic

refreshing my dropdown menu after implementing a custom directive

I've implemented the bootstrap-multiselect plugin to create multi-select drop downs. Here is an example: This is how my dropdown is structured: <select id="ms{{chore.id}}" multiple="multiple" applyplugin> <option ng-repeat="familyMembe ...

jqueryangularjs

Adjust the positioning of the content within each card inside the modal box

I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, plea ...

htmlcssbootstrap-4

Ajax request terminates once PHP has looped for a specific duration of time (2 minutes)

My challenge involves a button that is responsible for checking over 300 posts for a specific value and other conditions using about 20 if-else statements. Strangely, the ajax call initiated by this button halts after completing around 73 loops within a sp ...

javascriptphpjqueryajax

Is it possible to obtain a return value from Electron's webContents.executeJavaScript when NodeIntegration is disabled?

Is there a way to retrieve a return value without using NodeIntegration in Electron, similar to ipcRenderer when it's enabled? ...

javascriptnode.jsecmascript-6electron

Pressing the escape key on the keyboard will act as a shortcut to go

Is there a way to use Javascript in a browser to make the escape key on the keyboard go back? For instance, when visiting this page and clicking the "Fullscreen" link, it would be great to simply press the escape key and return to the previous page. What ...

javascriptbrowserkeyboardback

How can I use a combination of attributes selector in jQuery?

Is there a way to achieve this using jQuery? $('#SomeId input[type="hidden" AND name="somename"]') ...

jquery