Change the Color of a Text in Div Using Jquery Contains

Change the color of a text in div using jquery contains

Could be done like that:

http://jsfiddle.net/PELkt/

var search = 'bar';
$(document).ready(function () {
    $("div:contains('"+search+"')").each(function () {
        var regex = new RegExp(search,'gi');
        $(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
    });
});

Javascript/jQuery change word color by specific some text contains

You could replace all occurrences of your specific text snippets with custom styled html elements:

const yourName = "Groot";

const element = document.querySelector(".me");
element.innerHTML = element.innerHTML
    .replace("I'm", `<span class="black-class">I'm</span>`)
    .replace(yourName, `<span class="green-class">${yourName}</span>`);

Alternatively you can also make everything green except the I'm like this:

.me {
  color: green;
}

element.innerHTML = element.innerHTML
    .replace("I'm", `<span class="black-class">I'm</span>`);

This way not only Groot is colored green but everything inside of the div. That way your JavaScript doesn't need to know the name.

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

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;"> </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;"> </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;"> </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>

jQuery to modify div background color depending on text contained in another div

One way would be looping through outer div i.e :.mec-bg-color and using .find() to get required div text and the other way would be using closest i.e : $(this).closest('.mec-bg-color').css("background-color", color); .

Demo code :

jQuery(function($) {
//loop through outer div
  $(".mec-bg-color ").each(function() {
  //use find to get text
    console.log($(this).find(".mec-event-loc-place").text());
    var text = $(this).find(".mec-event-loc-place").text().toLowerCase();
    var color = {
      'background-color': '#fff'
    };

    switch (text) {
      case "southern":
        color = "#ce1870";
        break;
      case "south eastern":
        color = "#6dc8bf";
        break;
    }
    $(this).css("background-color", color);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event-grid-t2-head mec-bg-color clearfix">
  <div class="mec-event-month">
    <span class="mec-start-date-label" itemprop="startDate">28 September</span>
    <span class="mec-end-date-label" itemprop="endDate"> - 28 December</span>
  </div>
  <div class="mec-event-detail">
    <div class="mec-event-loc-place">Southern</div>
  </div>
</div>

How can I change the text color with jQuery?

Place the following in your jQuery mouseover event handler:

$(this).css('color', 'red');

To set both color and size at the same time:

$(this).css({ 'color': 'red', 'font-size': '150%' });

You can set any CSS attribute using the .css() jQuery function.

Change a div's background when the span inside that div contains specific text using jquery

Because your selector is grabbing more than a single element , when you are using .each() inside it's scope you can use this to refer to the current element that's being iterated:

$('.price > span').each(function(){
  if($(this).text()==="Free"){
    $(this).parent(".price").css('background-color', 'green');
  }
});

Updated Fiddle

---

Related Topics