时间戳

首页 > 解决方案 > 当没有更多的嵌套列表隐藏一个元素时

jquery - 当没有更多的嵌套列表隐藏一个元素时

问题描述

我认为这将是一个在 Stack Overflow 中很容易找到的问题，但看起来我找不到正确的答案。

我有一个动态的大嵌套列表，如下所示：

<ul>
    <li>
        category
        <span>+</span>
        <ul>
            <li>
                sub-category
                <span>+</span>
                <ul>
                    <li>
                        sub-category2
                        <span>+</span>
                    </li>
                    <li>
                        sub-category2
                        <span>+</span>
                    </li>
                </ul>
            </li>
            <li>
                sub-category
                <span>+</span>
            </li>
        </ul>
    </li>
    <li>
        category
        <span>+</span>
        <ul>
            <li>
                sub-category
                <span>+</span>
            </li>
            <li>
                sub-category
                <span>+</span>
            </li>
        </ul>
    </li>
    <li>
        category
        <span>+</span>
    </li>
</ul>

这个动态列表可能有许多嵌套列表，最多有无限的子类别（如果客户端足够疯狂地创建它们）。每个li都有一个span按钮来切换里面的嵌套列表。

我只想要一个简单的（我认为的）脚本，如果 a里面li没有任何ul内容，它将隐藏span

我最接近的尝试是这个：

if ($("ul li:not(:has(ul))")) {
    $(this).find('.desplegar-categoria').hide();
}

但我无法让它以某种方式工作。很确定我遗漏了一些明显的东西，在得到答案后我会觉得自己像个白痴，但如果你能让我摆脱此时此刻的悲惨状态，我将不胜感激。

标签： jquery

解决方案

你走在正确的轨道上；只需要迭代，而不仅仅是一个if. 因此，不是使用条件，而是让 jQuery 根据您的选择器过滤元素列表，然后使用 迭代each，并隐藏spans。

$("ul li:not(:has(ul))").each(function() {
  $(this).find('span').hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    category
    <span>+</span>
    <ul>
      <li>
        sub-category
        <span>+</span>
        <ul>
          <li>
            sub-category2
            <span>+</span>
          </li>
          <li>
            sub-category2
            <span>+</span>
          </li>
        </ul>
      </li>
      <li>
        sub-category
        <span>+</span>
      </li>
    </ul>
  </li>
  <li>
    category
    <span>+</span>
    <ul>
      <li>
        sub-category
        <span>+</span>
      </li>
      <li>
        sub-category
        <span>+</span>
      </li>
    </ul>
  </li>
  <li>
    category
    <span>+</span>
  </li>
</ul>

推荐阅读