My website contains a series of div elements that display an image, title, and excerpt. Some of the content divs have titles that span two lines, while others have shorter one-line titles. I would like to add a different class to the excerpt div if the title is one line and contains 24 characters or less.
To achieve this, I plan to utilize a jQuery function that iterates through each '.content' div and then uses an if statement to check the character length of the '.contentTitle'. If the condition is met, the function will apply a specific class to the '.excerpt' div within the same parent .content div.
The code snippet I've attempted so far doesn't seem to be working as expected. I suspect it may be due to both the '.contentTitle' and '.contentExcerpt .excerpt' divs being children of the container div (.content).
$(".content").each(function(){
if($(".contentTitle").text().length < 22) {
$(".contentExcerpt .excerpt").addClass('TEST');
}
});<div class="content">
<div class="contentImage"></div>
<div class="contentTitle"><?php the_title(); ?></div>
<div class="contentExcerpt">
<div class="excerpt">
<?php echo(get_the_excerpt()); ?>
</div>
</div>
</div>