如何使用 jQuery 在多级菜单中选择没有子级的 li？

【问题标题】：How to select li without children in a multilevel menu with jQuery?如何使用 jQuery 在多级菜单中选择没有子级的 li？
【发布时间】：2017-01-12 20:17:52
【问题描述】：

我有一个用 HTML <ul> 和 <li> 构建的多级（树）菜单。这是该标记的示例：

<ul class='dl-menu dl-menuopen'>
  <li>
    <a href='#' class='catlink'>Fashion</a>
    <ul class='dl-submenu'>
      <li>
        <a href='#' class='catlink'>Men</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Shirts</a></li>
          <li><a href='#' class='catlink'>Jackets</a></li>
          <li><a href='#' class='catlink'>Chinos &amp; Trousers</a></li>
          <li><a href='#' class='catlink'>Jeans</a></li>
          <li><a href='#' class='catlink'>T-Shirts</a></li>
          <li><a href='#' class='catlink'>Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Women</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Jackets</a></li>
          <li><a href='#' class='catlink'>Knits</a></li>
          <li><a href='#' class='catlink'>Jeans</a></li>
          <li><a href='#' class='catlink'>Dresses</a></li>
          <li><a href='#' class='catlink'>Blouses</a></li>
          <li><a href='#' class='catlink'>T-Shirts</a></li>
          <li><a href='#' class='catlink'>Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Children</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Boys</a></li>
          <li><a href='#' class='catlink'>Girls</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Electronics</a>
    <ul class='dl-submenu'>
      <li><a href='#' class='catlink'>Camera &amp; Photo</a></li>
      <li><a href='#' class='catlink'>TV &amp; Home Cinema</a></li>
      <li><a href='#' class='catlink'>Phones</a></li>
      <li><a href='#' class='catlink'>PC &amp; Video Games</a></li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Furniture</a>
    <ul class='dl-submenu'>
      <li>
        <a href='#' class='catlink'>Living Room</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Sofas &amp; Loveseats</a></li>
          <li><a href='#' class='catlink'>Coffee &amp; Accent Tables</a></li>
          <li><a href='#' class='catlink'>Chairs &amp; Recliners</a></li>
          <li><a href='#' class='catlink'>Bookshelves</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Bedroom</a>
        <ul class='dl-submenu'>
          <li>
            <a href='#' class='catlink'>Beds</a>
            <ul class='dl-submenu'>
              <li><a href='#' class='catlink'>Upholstered Beds</a></li>
              <li><a href='#' class='catlink'>Divans</a></li>
              <li><a href='#' class='catlink'>Metal Beds</a></li>
              <li><a href='#' class='catlink'>Storage Beds</a></li>
              <li><a href='#' class='catlink'>Wooden Beds</a></li>
              <li><a href='#' class='catlink'>Children's Beds</a></li>
            </ul>
          </li>
          <li><a href='#' class='catlink'>Bedroom Sets</a></li>
          <li><a href='#' class='catlink'>Chests &amp; Dressers</a></li>
        </ul>
      </li>
      <li><a href='#' class='catlink'>Home Office</a></li>
      <li><a href='#' class='catlink'>Dining &amp; Bar</a></li>
      <li><a href='#' class='catlink'>Patio</a></li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Jewelry &amp; Watches</a>
    <ul class='dl-submenu'>
      <li><a href='#' class='catlink'>Fine Jewelry</a></li>
      <li><a href='#' class='catlink'>Fashion Jewelry</a></li>
      <li><a href='#' class='catlink'>Watches</a></li>
      <li>
        <a href='#' class='catlink'>Wedding Jewelry</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Engagement Rings</a></li>
          <li><a href='#' class='catlink'>Bridal Sets</a></li>
          <li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
          <li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我的目标是选择所有没有子节点的&lt;li&gt; 节点。我想得到树的“叶子”，那些没有孩子的元素，最后的节点。

如何使用 jQuery 做到这一点？

【问题讨论】：

  • 据我所知，您的每个&lt;li&gt; 都有孩子。您的意思是选择其中包含第二个列表 (&lt;ul&gt;) 的列表还是应该是空列表？
  • 没有孩子&lt;li&gt;？看起来代码中的所有&lt;li&gt;s 至少有一个子&lt;a&gt; 元素。
  • @RemcovanOs 也许我表达错了，我想得到树的“叶子”，那些没有孩子的元素，最后的节点。

标签： javascript jquery html css tree


【解决方案1】：

您应该能够使用以下任何一种：

$(".dl-menu li:not(:has(li))")

或

$(".dl-menu li:not(:has(ul))")

【讨论】：

  • 这两行代码有什么区别？我的情况是否等效？
  • @alessadro 参考您的示例，它们将是等效的，因为您要查找的孩子都没有 li 或 ul 标签。我会在您的示例中使用:has(ul) 版本，因为它会首先遇到ul 标记。
  • 太棒了！只有最后一件事，在我的真实案例中，我得到了一些 &lt;li.dl-back&gt; 我怎样才能删除那个类的 li？
  • 你可以做类似$(".dl-menu li:not(:has(li)):not(.dl-back)")
【解决方案2】：

我假设你想要所有链接：

$('li:has(a):not(:has(ul))')


$('li:has(a):not(:has(ul))').each(function(){

console.log(
   $(this).html()
);

});
es-console-wrapper{
  height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class='dl-menu dl-menuopen'>
  <li>
    <a href='#' class='catlink'>Fashion</a>
    <ul class='dl-submenu'>
      <li>
        <a href='#' class='catlink'>Men</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Shirts</a></li>
          <li><a href='#' class='catlink'>Jackets</a></li>
          <li><a href='#' class='catlink'>Chinos &amp; Trousers</a></li>
          <li><a href='#' class='catlink'>Jeans</a></li>
          <li><a href='#' class='catlink'>T-Shirts</a></li>
          <li><a href='#' class='catlink'>Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Women</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Jackets</a></li>
          <li><a href='#' class='catlink'>Knits</a></li>
          <li><a href='#' class='catlink'>Jeans</a></li>
          <li><a href='#' class='catlink'>Dresses</a></li>
          <li><a href='#' class='catlink'>Blouses</a></li>
          <li><a href='#' class='catlink'>T-Shirts</a></li>
          <li><a href='#' class='catlink'>Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Children</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Boys</a></li>
          <li><a href='#' class='catlink'>Girls</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Electronics</a>
    <ul class='dl-submenu'>
      <li><a href='#' class='catlink'>Camera &amp; Photo</a></li>
      <li><a href='#' class='catlink'>TV &amp; Home Cinema</a></li>
      <li><a href='#' class='catlink'>Phones</a></li>
      <li><a href='#' class='catlink'>PC &amp; Video Games</a></li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Furniture</a>
    <ul class='dl-submenu'>
      <li>
        <a href='#' class='catlink'>Living Room</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Sofas &amp; Loveseats</a></li>
          <li><a href='#' class='catlink'>Coffee &amp; Accent Tables</a></li>
          <li><a href='#' class='catlink'>Chairs &amp; Recliners</a></li>
          <li><a href='#' class='catlink'>Bookshelves</a></li>
        </ul>
      </li>
      <li>
        <a href='#' class='catlink'>Bedroom</a>
        <ul class='dl-submenu'>
          <li>
            <a href='#' class='catlink'>Beds</a>
            <ul class='dl-submenu'>
              <li><a href='#' class='catlink'>Upholstered Beds</a></li>
              <li><a href='#' class='catlink'>Divans</a></li>
              <li><a href='#' class='catlink'>Metal Beds</a></li>
              <li><a href='#' class='catlink'>Storage Beds</a></li>
              <li><a href='#' class='catlink'>Wooden Beds</a></li>
              <li><a href='#' class='catlink'>Children's Beds</a></li>
            </ul>
          </li>
          <li><a href='#' class='catlink'>Bedroom Sets</a></li>
          <li><a href='#' class='catlink'>Chests &amp; Dressers</a></li>
        </ul>
      </li>
      <li><a href='#' class='catlink'>Home Office</a></li>
      <li><a href='#' class='catlink'>Dining &amp; Bar</a></li>
      <li><a href='#' class='catlink'>Patio</a></li>
    </ul>
  </li>
  <li>
    <a href='#' class='catlink'>Jewelry &amp; Watches</a>
    <ul class='dl-submenu'>
      <li><a href='#' class='catlink'>Fine Jewelry</a></li>
      <li><a href='#' class='catlink'>Fashion Jewelry</a></li>
      <li><a href='#' class='catlink'>Watches</a></li>
      <li>
        <a href='#' class='catlink'>Wedding Jewelry</a>
        <ul class='dl-submenu'>
          <li><a href='#' class='catlink'>Engagement Rings</a></li>
          <li><a href='#' class='catlink'>Bridal Sets</a></li>
          <li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
          <li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

    【解决方案3】：

    这里需要注意的一点 - 在您的示例中，您的节点中没有一个是空的。他们都有孩子。有些有“a”标签，有些有“a”和“ul”标签。根据您的示例，您似乎想要选择所有没有“ul”标签的“li”元素作为子元素。这被称为“父选择器”，不能单独使用 CSS 完成（不幸的是）。但它可以在 javascript 中完成，并且由于您想要在 javascript 中得到答案，这应该可以工作：

    $('li:not(:has(ul))').addClass('link');

    您可以根据需要进一步细化您的查询。

    jsFiddle：https://jsfiddle.net/mspinks/68tguxza/

    【讨论】：

      【解决方案4】：

      如果你只寻找没有 ul 子元素的 li 元素，那么你可以这样做。

      $('li:not(:has(ul))')

      【讨论】：

      • 很想知道为什么投反对票，因为这正是他所需要的。只需查看具有特定性但与我的解决方案相同的已接受答案。
      猜你喜欢
      • 1970-01-01
      • 2011-04-22
      • 2011-03-01
      • 2015-08-02
      • 1970-01-01
      • 2011-04-28
      • 1970-01-01
      • 1970-01-01
      • 2014-07-25
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode