Question

我有一个使用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>

我的目标是选择没有子节点的所有<li>个节点。我想得到＆＃34;叶子＆＃34;树的那些，没有孩子的元素，最后的节点。

如何使用jQuery执行此操作？

Answer 1

您应该可以使用以下任一项：

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

或

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

Answer 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>

Answer 3

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

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

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

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

Answer 4

如果您只查找没有孩子的li元素，那么您可以这样做。

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

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

4 个答案: