0

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>
        <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>
            </div>
    </div>
</div> 

jQuery

jQuery(document).ready(function( $ ){
    $('.list_own_col_gt img.icon.icons8').each(function(){
        if ($(this).attr('src').indexOf("food") != -1){
             $('.lp_list_call').addClass("hide");
    }
        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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.