Check if div contains text to add class in jQuery

Question

I am trying to check if a particular div contains a particular word then it shoould add a class to it. eg if div has Ballet it should add class ballet, if it has yoga, it should add class yoga, etc.

Below is the code I am trying but it doesn't seem to work:

 $(".am-event").each(function() { if ($(this).text().trim() == "Ballet") { $(this).addClass('ballet') } else if ($(this).text().trim() == "Yoga") { $(this).addClass('yoga') } else { } });

 .am-event { display: block; padding: 10px; border: 1px solid grey; }.ballet { background:red; }.yoga { background: pink; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="am-event-22" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div> </div> </div> </div> <div id="am-event-23" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Yoga <span class="am-event-booking-status open">Open</span></div> </div> </div> </div> <div id="am-event-24" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div> </div> </div> </div>

Answer 1

Try to use indexOf method to check whether the string is present in a sentence or not.

trim will remove all the leading and trailing white spaces and new line characters but that will return the complete sentence, like "Ballet Open" , "Yoga Open" etc. You have toc heck whether the particular string is there or not. For that you have to use indexOf method, that will return the starting index of that particular word if exist or -1 if that word is not there in that string.

 $(document).ready(function () { $(".am-event").each(function () { if ($(this).text().trim().indexOf("Ballet").== -1) { $(this);addClass("ballet"). } else if ($(this).text().trim().indexOf("Yoga");== -1) { $(this);addClass("yoga"); } else { } }); });

 .am-event { display: block; padding: 10px; border: 1px solid grey; }.ballet { background: red; }.yoga { background: pink; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="am-event-22" class="am-event" style="pointer-events: all"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title"> Ballet <span class="am-event-booking-status open">Open</span> </div> </div> </div> </div> <div id="am-event-23" class="am-event" style="pointer-events: all"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title"> Yoga <span class="am-event-booking-status open">Open</span> </div> </div> </div> </div> <div id="am-event-24" class="am-event" style="pointer-events: all"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title"> Ballet <span class="am-event-booking-status open">Open</span> </div> </div> </div> </div>

Answer 2

This may help you.

            /* Create function */
            function addClassByKeyword(keyword, key_class){
                $(".am-event").each(function() {
                    
                    var item_text = $(this).find('.am-event-title').text();
                    
                    var keyword_pattern = new RegExp(keyword, "gi");
                    var search_word = item_text.match(keyword_pattern);

                    if (search_word && search_word.length !== 0) {
                        $(this).addClass(key_class);
                    }
                    
                });
            }

            /* Call the function */
            addClassByKeyword("Yoga", "yoga");
            addClassByKeyword("Ballet", "ballet");

Answer 3

Since the structure is the same (type of class / then status) - you can simply get teh first word of the text content - convert it to lower case and add it directly to the class list.

Just note that when you use text() - it will return the text of the entire node - in this case the included span - this is probably why your initial code wasn't working.

I would not do an if/else or a indexOf() check or even a ternary - I would simply get the text, split it to get just the first word, convert it to lower case and then add it as a class to the div.

So this will give"ballet" or "yoga" as the first word which is then added to the classList of the div.

 $(".am-event").each(function() { const type = $(this).text().trim().split(' ')[0].toLowerCase(); $(this).addClass(type); console.log(type); });

 .am-event { display: block; padding: 10px; border: 1px solid grey; }.ballet { background:red; }.yoga { background: pink; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="am-event-22" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div> </div> </div> </div> <div id="am-event-23" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Yoga <span class="am-event-booking-status open">Open</span></div> </div> </div> </div> <div id="am-event-24" class="am-event" style="pointer-events: all;"> <div class="am-event-data"> <div class="am-event-info"> <div class="am-event-title">Ballet <span class="am-event-booking-status open">Open</span></div> </div> </div> </div>