jQuery addClass example

Change class name on click in jQuery

HTML

<div class="container">
  It is
</div>

<div class="container">
  It is a long 
</div>

<div class="container">
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
</div>

CSS

.length-15 {
  color: red;
}

.length-30 {
  color: green;
}

.length-45 {
  color: orange;
}

JavaScript

$(".container").each(function(i) {
let len = $(this).text().length;
  if (len <= 15) {
    $(this).addClass("length-15");
  }
  if (len > 15 && len <= 30) {
    $(this).addClass("length-30");
  }
  if (len > 30 && len <= 45) {
    $(this).addClass("length-45");
  }
});