If Div Contains Specific Word Add A New Class In Parent Div Using Jquery

This is the HTML code:

Offer

And here's the jquery if ($('.menu-item-category').tex

Solution 1:

Based on your JSFiddle and your comments, you'll need to compare the text() for each selected element. Otherwise, text() will return the "combined text contents of each element in the set of matched elements".

One way is to iterate over each element:

I've also added trim() to strip away any white space from the elements' text contents.

var $categories = $('.menu-item-category');

$categories.each(function() {
  var $this = jQuery(this);
  if ($this.text().trim() == 'Offer') {
    $this.closest('.menu-3-cat').addClass('make-me-red');
  }
});

.menu-3-cat {
  position: relative;
  overflow: hidden;
}

.make-me-red {
  background: #F44336;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu-3-cat">
  <div class="menu-item-category">
    Things
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Offer
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Stuff
  </div>
</div>

Another method is to filter the selection to elements whose text is "Offer" before adding the class.

const $categories = $('.menu-item-category');

$categories
  .filter((k, elm) => jQuery(elm).text().trim() == 'Offer')
  .closest('.menu-3-cat')
  .addClass('make-me-red')

.menu-3-cat {
  position: relative;
  overflow: hidden;
}

.make-me-red {
  background: #F44336;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu-3-cat">
  <div class="menu-item-category">
    Things
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Offer
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Stuff
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Nothing
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Offer
  </div>
</div>
<div class="menu-3-cat">
  <div class="menu-item-category">
    Last One
  </div>
</div>

Solution 2:

Ok so there are about 4 problems with your fiddle.

1. You didn't include jQuery.

2. You didn't wrap the script in $(document).ready(function(){.....});. Now, since you are in a fiddle you can sometimes get away with that because there are things which get injected but if you ran that code on a regular page it wouldn't work (reliably) without the document.ready.

3. You are checking for exact equality. That sounds fine but there is whitespace which you are not accounting for. If you change it to <div class="menu-item-category">Offer</div> then you will see a difference.

4. Your code doesn't do what you described in the question.

   $(document).ready(function(){
       if ($('.menu-item-category').text() === 'Offer') {
           $('.menu-3-cat').addClass('make-me-red');
       }
    })
   

Here is your fiddle, working. https://jsfiddle.net/mdzu4cny/13/

Edit: Rather than checking for exact equals, using a trim or substring would work better, depending on what your exact goal is.

Edit 2: Based on comments, you have more than one block so you'll need to iterate. Try something like this:

    $(document).ready(function(){   
        $('.menu-item-category').each(function(){
            var $this = $(this);
            if($this.text().indexOf('Offer') > -1)
                $this.closest('.menu-3-cat').addClass('make-me-red')
            })  
         })

Solution 3:

You had two issues in your code, you had an empty line in the div containing the text "Offer" so when comparing it to Offer in the if statement it returns false. I removed the space in div so the if statement returns true.

You also needed a document ready tag, so that the if statement is run when the page loads

Here is the full working code

$(document).ready(function(){
	if ($('.menu-item-category').text() === 'Offer') {
		$('.menu-3-cat').addClass('make-me-red');
  }
});

.menu-3-cat {
  position:relative;
  overflow:hidden;
}

.make-me-red {
  background:#F44336;
  color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
  <div class="menu-item-category">Offer</div>
</div>