在 jQuery 中选择特定的 class

Question

I'm trying to filter different posts kinda page. Each post has many different categories. But the search filter is two-layered, the main filter and then below a more specific selection of filters where I used checkboxes. The problem is that all categories are on the same level. How can I access each selected class based on the user filter input and then output the right post?

Categories and their classes are listed like this:

    <span class="category">
        <span class="cat Event">Event</span>
        <span class="cat Developing">Developing</span>
        <span class="cat SQL">SQL</span>
      </span> 

Where "Event" is in the main filter and the other two are in the second checkbox filter

The project is done in MVC .NET and for filtering functionality, I'm using jQuery

This is how to get each post in my view:

 <div class="novice-list">
        @foreach (var item in Model.Articles)
        {
            <div class="novica-container">
                <a href="@DataContext.Current.RouteUrlManager.GetModuleLink("article", null, "details", item.Id, item.Title)">
                    <div class="media">
                        @{
                            string slika = string.Empty;
                            if (item.Id > 166 || item.Id == 159)
                            {
                                slika = $"{WellKnownStrings.StorageBaseUrl}{WellKnownStrings.ArticleImageContainer}/{item.FeaturedImage}";
                            }
                            else
                            {
                                slika = item.FeaturedImageUrl;
                            }
                        }
                        <div class="slika" style="background-image: url('@if (item.FeaturedImageUrl != "") { @slika }');">
                        </div>
                        <div class="media-body">
                            @*<a href="#">content</a>*@
                            <div class="meta">
                                <span class="published">@item.DateFormated</span>
                                <span class="category">
                                    @foreach (var cat in @item.Category)
                                    {
                                        <span class="cat @cat.Title">@cat.Title</span>
                                    }
                                </span>
                            </div>
                            <h2>@item.Title</h2>
                            <p>@item.Summary</p>
                        </div>
                    </div>
                </a>
            </div>
        }
    </div>

this is how I get matches from first (Main) filtering:

                isCheckedMain = true;
              
                if (isCheckedMain) {
                    var selectedClass = $(this).attr('class');


                    // reset the active class on all the buttons
                    $('#filterOptions li').removeClass('show');
                    // update the active state on our clicked button
                    $(this).parent().addClass('show');

                    if (selectedClass == 'all') {
                        // show all our items
                        $('.novica-container').slideDown(1000, "linear");
                    }
                    else {
                        // hide all elements that don't share ourClass
                        $('.novica-container').hide();
                        // show all elements that do share ourClass
                        $('.novica-container').find('span.cat.' + selectedClass).parents('.novica-container').slideDown(1000, "linear");
                    }

                }

And matches for checkbox filter:

     $(".checkbox-filter :checkbox").click(function () {
    
    
        isBoxChecked = true;
        if (isCheckedMain && isBoxChecked) {
    
var selectedBox = $(this).attr('id');
var selectedMain = selectedClass;
  
        if ($('input#' + selectedBox).is(':checked')) {
        if ($('span.cat').hasClass(selectedMain)) {
            $('.novica-container').hide();
            $('span.cat.'+selectedMain).addClass(selectedBox);               
                                    
           $('.checkbox-filter :checkbox:checked').each(function () {
                    //Get the selected checkbox value  
      var selectedBox = $(this).attr('id');
   $('.novica-container').find('span.cat.' + selectedMain  ,'.'+selectedBox).parents('.novica-container').slideDown(700);
                                       
  });
   } 
    }
       else if ($(this).is(':not(checked')) {
               $('.novica-container').find('span.cat.' + selectedBox).parents('.novica-container').slideUp(700);
    
      if (($('input[type="checkbox"]:checked').length === 0)) {
                      isBoxChecked = false;
            $('.novica-container').slideDown(1000, "linear");

This is what I have so far, I'm trying to do something with true-false( if one is true, search only with the main filter, if both are true search more accurately with other categories. And I've been stuck here for days trying to merge both sides of the code. They both work separately but not together

Picture of filter

Answer 1

Found a solution for this.

I added all of the categories names one level higher in my View . So that class="category" now has values of all the other categories.

Example: class="category Event Developing SQL"

And then I could just use this jQuery to filter selected posts

 $('span.category.' + selectedMain + '.' + selectedBox).parents('.novica-container').slideDown(700);