• Thu. Dec 9th, 2021

javascript – jQuery if Loop Object Contains Text then Show/Hide Elements Per Loop Object


Nov 25, 2021

I am building a directory site. The search results page displays 10 posts per page, each is wrapped in it’s own Div and displays simple information such as a category icon, name, address and a “Call Now” link.

I am attempting to hide the “Call Now” link for any Div which contains the “Food” category icon.

Here is the HTML of the container and the first two divs

<div class="promoted-listings">
    <div class="grid-box-container">
        <div class="list_own_col_gt">
            <span class="cat-icon"><img class="icon icons8" src="https://www.example.com/wp-content/uploads/2021/11/food.png"></span>                                                    
            <p class="lp_list_call"><a href="tel:7777777777">Call Now</a></p>
        <div class="list_own_col_gt">
            <span class="cat-icon"><img class="icon icons8" src="https://www.example.com/wp-content/uploads/2021/11/drinks.png"></span>                                                    
            <p class="lp_list_call"><a href="tel:9999999999">Call Now</a></p>


jQuery(document).ready(function( $ ){
    $('.list_own_col_gt img.icon.icons8').each(function(){
        if ($(this).attr('src').indexOf("food") != -1){
        else if ($(this).attr('src').indexOf("food") == -1){   
            return false;

This code hides the “Call Now” button on all loop items rather than just the div containing the “food” category icon. I have tried various methods of break and return false but cannot apply this function per loop item rather than the entire page.


Leave a Reply

Your email address will not be published. Required fields are marked *