jquery - 选择列出一个项目(如果它有子列表)

Question

我有一个链接列表。如果父级我需要在链接中附加一些内容 LI 包含另一个列表。很难选择顶级而不是子级中的级别。

<div id="container">
  <ul>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
      <ul>
        <li>
          <a href="#">link</a>
        </li>
        <li>
          <a href="#">link</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
      <ul>
        <li>
          <a href="#">link</a>
        </li>
        <li>
          <a href="#">link</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

JS

 $('#container > ul > li').has('ul').each(function() {
   $(this).find('a').append('zzz');
 });

DEMO

Answer 1

这是一个疯狂的想法...您可以通过定位 <a> 来纯粹使用 CSS 来完成此操作不是其父级中最后一个子级的标签 <li> .

#container > ul > li > a:not(:last-child):after {
  content: 'zzz';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
      <ul>
        <li>
          <a href="#">link</a>
        </li>
        <li>
          <a href="#">link</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">link</a>
    </li>
    <li>
      <a href="#">link</a>
      <ul>
        <li>
          <a href="#">link</a>
        </li>
        <li>
          <a href="#">link</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

<小时/>

否则，您可以在 jQuery 中使用类似的选择器

$('#container > ul > li > a:not(:last-child)').append('zzz');