jquery - If div contains specific word add a new class in parent div using jquery

Question

This is the HTML code:

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

And here's the jquery

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

It should be work and add the class "make-me-red" to the parent div "menu-3-cat" but it doesn't. What i 'm doing wrong?

JSFiddle HERE

标签： jqueryhtml

Answer 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>