0

I have a calendar which contains a same class for every day. I would like to change color of class(some box in table) which contains a character "C" inside. I'm able to find it using jquery but when I try to change it, it changes every element with that class so I'm trying to use this but it wont work... Here is the code 

   if(($(".tribe-events-month-event-title > a").text()).includes("C")){
     $(this).css("background-color","red");
   }

I tried this as well, but it changed every element with that class

   var aaa = $(".tribe-events-month-event-title > a")
   if(aaa.text().includes("C")){
     aaa.css("background-color","red");
   }
Andrejovic Andrej
  • 208
  • 2
  • 11
  • 1
    [`.text()`](https://api.jquery.com/text/) will return the text of every matched element. You will have to loop through the elements with [`.each()`](https://api.jquery.com/each/). Or you use [`.css()`](https://api.jquery.com/css/) and pass a function as the second parameter (-> [`.css(propertyName, function)`](https://api.jquery.com/css/#css-propertyName-function)), where the function then is called for every element in the collection. – Andreas Oct 30 '19 at 06:32
  • @Andreas thank you, could you please write me a example for the `.each()` or `.css()` how could I use it? – Andrejovic Andrej Oct 30 '19 at 06:36

5 Answers5

1

The problem is that the aaa contains all element that satisfies the selector condition (.tribe-events-month-event-title > a). So if any of them includes C you are applying aaa.css("background-color","red"); which makes all aaa elements turn red. What you have to do is loop through each aaa element and check the condition.

var aaa = $(".tribe-events-month-event-title > a")
 aaa.each(function(e) {
   if($(this).text().includes("C")){
     $(this).css("background-color","red");
   }
 })

Codepen: https://codepen.io/ashfaq_haq/pen/bGGooLz

Ashique
  • 345
  • 1
  • 8
1

jQuery has a handy :contains pseudo selector:

$(".tribe-events-month-event-title > a:contains('C')")
  .css("background-color","red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
1

You can use jquery :contains to avoid looping:

 var elements = $(".tribe-events-month-event-title > a:contains('C')");
elements.css("background-color","red");
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a href="#">A</a>
</div>
<div class="tribe-events-month-event-title">
  <a href="#">C</a>
</div>
<div class="tribe-events-month-event-title">
  <a href="#">C</a>
</div>
Bilal Siddiqui
  • 3,579
  • 1
  • 13
  • 20
0

filter or :contains are the most elegant here

$(".tribe-events-month-event-title > a").filter(function() {
   return $(this).text().includes("C");
 }).css("background-color","red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>

$(".tribe-events-month-event-title > a:contains('C')").css("background-color","red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

I've proposed to use .each() and .css(propertyName, function).
As there is already an answer for .each() I'm only going to add the .css() one:

.css( propertyName, function )

propertyName
    Type: String
    A CSS property name.

function
    Type: Function( Integer index, String value ) => String or Number
    A function returning the value to set. this is the current element.
    Receives the index position of the element in the set and the old value as arguments.

$(".tribe-events-month-event-title > a")
  .css("background-color", function(_, oldValue) {
    if ($(this).text().includes("C")) {
      return "red";
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tribe-events-month-event-title">
  <a>A</a>
  <a>B</a>
  <a>C</a>
  <a>D</a>
  <a>C</a>
  <a>D</a>
</div>
Andreas
  • 21,535
  • 7
  • 47
  • 56
  • `return $(this).text().includes("C") ? "red" : null` – mplungjan Oct 30 '19 at 06:58
  • @mplungjan _"If nothing is returned in the setter function (ie. `function( index, style ){}` ), or if `undefined` is returned, **the current value is not changed**. This is useful for selectively setting values only when certain criteria are met"_ – Andreas Oct 30 '19 at 07:14
  • I know. Hence the null. I just find the ternary more elegant than the if – mplungjan Oct 30 '19 at 07:24