如何在已经具有样式的特定页面上隐藏 html 元素（可见性：可见）并且仅当孩子具有某个 class

Question

I have content/posts that are shown in a grid on one webpage from which a user can choose and subsequently be taken to that specific content on another page. I have the same grid of content/posts on six different pages. On each page I want to filter out content based on a specific class.

Each item in the grid is already styled "visible" I suspect by the plugin I'm using.

In the example below, the class I want to use to filter the content is "ld_topic_category-video-interaction-a1". The element I want to hide is the specific "item grid-1" which is connected to "ld_topic_category-video-interaction-a1".

<div class="item grid-1" style="visibility: visible;">
    <article id="post-2637" class="post post-2637 sfwd-topic type-sfwd-topic status-publish hentry ld_topic_category-video-interaction-a1 user-has-not-earned"...</article>
</div>

I've tried the following code:

jQuery(document).ready(function($) {
$('ld_topic_category-video-interaction-a1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().css("display", "none");
       }
});
});

As well as:

jQuery(document).ready(function($) {
$('ld_topic_category-video-interaction-a1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().hide();
       }
});
});

And this:

var elements = document.getElementsByClassName('ld_topic_category-video-interaction-a1');

for(let i=0; i< elements.length; i++){
    elements[i].style.display = "none";
}

Also this:

jQuery(document).ready(function($) {
$('.item.grid-1').each(function(){
       if($(this).hasClass("ld_topic_category-video-interaction-a1")){
        $(this).parent().css("display", "none");
       }
});
});

Any suggestions would be greatly appreciated. Please let me know if there is any other info I need to provide.

Thanks

Answer 1

CSS Visibility and Display properties are not the same. Please refer to the link below: https://www.tutorialrepublic.com/css-tutorial/css-visibility.php#:~:text=CSS%20Visibility%20vs,affect%20the%20layouts .

If you want to stick with visibility style you can do this instead to hide the element:

$(this).parent().css("visibility", "visible"); //this is to make element visible again 
$(this).parent().css("visibility", "hidden"); //this is to make element hidden

Refer to this answer for more info on CSS Visibility: Equivalent of jQuery.hide() to set visibility: hidden

If you wanna stick with your jquery code however, you can instead make do with Display property:

<div class="item grid-1" style="display:block;"> //to show the element
     <article id="post-2637" class="post post-2637 sfwd-topic type-sfwd-topic status-publish hentry ld_topic_category-video-interaction-a1 user-has-not-earned"... 
     </article>
</div>

<div class="item grid-1" style="display:none;"> //to hide the element
     <article id="post-2637" class="post post-2637 sfwd-topic type-sfwd-topic status-publish hentry ld_topic_category-video-interaction-a1 user-has-not-earned"... 
     </article>
</div>

I hope this helps.

Answer 2

could you use display: none to hide the items of the grid you don't want?