如何解决使用jQuery检查标题的可见项-需要不同的方法
使用jQuery时,我需要检查该标题是否有可见的列表项。
下面是我的方法,基本上是通过字符串将类名串联起来来检查具有相同类名的li
元素。
由于以下原因,此方法不起作用:
当我使用
let captionClass = $(caption).attr('class');
一旦我有带有特殊字符的选择器,脚本就会失败,在此示例中为'&'
我尝试使用 jQuery.escapeSelector()函数:
let captionClass = $.escapeSelector($(caption).attr('class'));
但这似乎不起作用,因为我们使用的是Magento 2.3随附的旧版jQuery版本,我无法更改。
我现在可以尝试自己逃脱角色,例如:
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>
解决方法
我现在这样解决了:
- 查询所有可见的
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。