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

Posted 2023-05-09

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

【英文标题】：Checking for visible items to a caption with jQuery - need different approach

【发布时间】：2020-12-28 23:33:27

【问题描述】：

使用 jQuery，我需要检查该标题是否有可见的列表项。 下面是我的方法，基本上通过字符串连接类名来检查具有相同类名的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 版本或其中包含带有特殊字符的类名这一事实。 几乎所有其余的都可以调整，包括 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>

【参考方案1】：

我现在是这样解决的：

查询所有可见的li.product filter() 与 h4 具有相同类别的项目的结果@

还可以尝试删除类名中的无效字符，但这是另一个主题。

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