Checking for visible items to a caption with jQuery – need different approach

With jQuery I need to check for a caption if there are visible list-items for that caption.
Below is my approach, basically checking for li elements with the same class name which are visible, by string concatenating the class names. This is not working for the following reasons:

When I use

let captionClass = $(caption).attr('class');

the script fails as soon as I have selectors with special characters, in this example '&'

I tried using the jQuery.escapeSelector() function:

let captionClass = $.escapeSelector($(caption).attr('class'));

But this seems to not work because we are using an older jQuery Version, which comes with Magento 2.3 and I cannot change.

I could now try to escape the characters myself, like here:
Need to escape a special character in a jQuery selector string

but all of this made me question my whole approach. Maybe jQuery provides an easier solution?

What would be the easiest and cleanest way to achieve my original goal?

Check for each caption if there are visible items.

I cannot change jQuery Version or the fact that there are class names with special chars in them.
Pretty much all of the rest could be adjusted including the html structure.

Anyway, here’s the code to my approach

$('h4').each((index, caption) => {
    console.log(caption);
    console.log($(caption).attr('class'));
    console.log('li.product.'+$(caption).attr('class')+':visible');
    let captionClass = $.escapeSelector($(caption).attr('class'));
    //let captionClass = $(caption).attr('class'); 
    console.log(captionClass);
    if ($('li.product.'+captionClass+':visible').length === 0) {
        $(caption).hide();
    } else {
        $(caption).show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="product-list">
    <h4 class="color-red">Red</h4>
    <li class="product color-red size-l">Red Large</li>
    <li class="product color-red size-m">Red Medium</li>
    <li class="product color-red size-s">Red Small</li>
    <h4 class="color-blue">Blue</h4>
    <li class="product color-blue size-l">Blue Large</li>
    <li class="product color-blue size-m">Blue Medium</li>
    <li class="product color-blue size-s">Blue Small</li>
    <h4 class="color-&-white">White</h4>
    <li class="product color-&-white size-l">White Large</li>
    <li class="product color-&-white size-m">White Medium</li>
    <li class="product color-&-white size-s">White Small</li>
</ul>

Answer

I solved it like this now:

1. Query for all visible li.product
2. filter() the result for items that have the same class as the h4

Might also try to get rid of the invalid chars in the class name, but that’s another topic.

$(document).ready(function() {
  $('h4').each((index, caption) => {
      if ($('li.product:visible').filter((i, e) => {
          return $(e).hasClass($(caption).attr('class'));
      }).length === 0) {
          $(caption).hide();
      } else {
          $(caption).show();
      }
  });
});

.color-red {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="product-list">
    <h4 class="color-red">Red</h4>
    <li class="product color-red size-l">Red Large</li>
    <li class="product color-red size-m">Red Medium</li>
    <li class="product color-red size-s">Red Small</li>
    <h4 class="color-blue">Blue</h4>
    <li class="product color-blue size-l">Blue Large</li>
    <li class="product color-blue size-m">Blue Medium</li>
    <li class="product color-blue size-s">Blue Small</li>
    <h4 class="color-&-white">White</h4>
    <li class="product color-&-white size-l">White Large</li>
    <li class="product color-&-white size-m">White Medium</li>
    <li class="product color-&-white size-s">White Small</li>
</ul>