使用 jQuery 检查标题的可见项目 - 需要不同的方法

Question

使用 jQuery 我需要 检查标题是否可见 list-items。
下面是我的方法，主要是通过字符串连接 class 名称来检查具有相同 class 名称的 li 元素是否可见。由于以下原因，这不起作用：

当我使用

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

只要我有带有特殊字符的选择器，脚本就会失败，在这个例子中 '&'

我尝试使用 jQuery.escapeSelector() 函数：

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

但这似乎不起作用，因为我们使用的是较旧的 jQuery 版本，它随 Magento 2.3 一起提供，我无法更改。

我现在可以尝试自己转义字符，如下所示：
Need to escape a special character in a jQuery selector string

但所有这些让我质疑我的整个方法。也许 jQuery 提供了更简单的解决方案？

实现我最初目标的最简单、最干净的方法是什么？

检查每个标题是否有可见项。

我无法更改 jQuery 版本，也无法更改 class 名称中包含特殊字符的事实。
几乎所有其余的都可以调整，包括 html 结构。

无论如何，这是我的方法的代码

$('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 1

我现在是这样解决的：

查询所有可见的li.product
filter() 与 h4

可能还会尝试删除 class 名称中的无效字符，但那是另一个话题了。

$(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>

使用 jQuery 检查标题的可见项目 - 需要不同的方法

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

html

javascript

jquery

jquery-selectors