Javascript JQuery将addClass添加到第一个可见子级

我有一个页面，其中有几个未排序的列表，与下面的代码类似，除了#7和大写字母，它们是根据db数据动态构建的。根据页面上的用户操作，所有或部分列表元素将显示或不显示。我需要做的是将类“with headers”添加到第一个可见的列表元素中，该元素是一个子元素，或者在ul下，并带有class=“minimal product”。加载页面时，通过文件中包含的其他css或javascript自动添加“with headers”类。我试图用JQuery覆盖它

<div id="course-group-7" class="content active">
  <ul class="minimal-products zebra-stripes">
    <li class="fos-crs-HPA minimal-product-wrapper toggle-container with-headers" style="display: none;">
    <li class="fos-crs-HLD minimal-product-wrapper toggle-container even" style="display: list-item;">
    <li class="fos-crs-HRM minimal-product-wrapper toggle-container" style="display: list-item;">
    <li class="fos-crs-SPH minimal-product-wrapper toggle-container" style="display: none;">
  </ul>
</div>

---

谢谢你的帮助

$（'ul.minimal-products li:visible:first'）.addClass（“带标题”）对我有用你的代码对我有用。您是否在DOM准备就绪之前运行此代码？页面已完全加载。然后用户选择下拉列表中的选项。这触发了我的jquery。必须是主css和/或javascript中的代码阻止了我的努力。我下一步会深入研究这个问题。谢谢你的关注！页面中是否有多个具有
最小产品
类别的uls？你能做一个
$（“ul.minimal-products”）.length
并检查一下吗？
$（“ul.minimal-products li:visible:first”）.addClass（“带标题”）对我有用你的代码对我有用。您是否在DOM准备就绪之前运行此代码？页面已完全加载。然后用户选择下拉列表中的选项。这触发了我的jquery。必须是主css和/或javascript中的代码阻止了我的努力。我下一步会深入研究这个问题。谢谢你的关注！页面中是否有多个具有
最小产品
类别的uls？你能做一个
$（“ul.minimal products”）.长度
并检查一下吗？
$('ul.minimal-products li').removeClass("with-headers");
$('ul.minimal-products li:visible:first').addClass("with-headers");