javascript - 查找 UL 中的最后一个子代或孙代

Question

我有一个使用 UL 生成基本导航的 CMS。每个一级 LI 都被设计为一个组。我需要将样式应用于每个第一级 LI“组”中的最后一个元素。意义;如果一级 LI 没有 child ，我想对其应用一种样式(作为组的“底部”)；如果它确实有 child ，我想找到最后一个出现的 child 或孙元素(同样是组的“底部”)。我同时使用了 CSS 和 Javascript“last”类，并成功地将样式应用于第一级 LI 中某个深度的最后一个子项，但这没有帮助，因为列表底部的按钮深度未知.

我的思路涉及一个 IF 语句，该语句找到第一层的最后一个子节点，检查它是否有子节点，如果有，进入另一层深度并找到最后一个子节点并检查是否有子节点，重复此过程直到它找到在第一级 LI 组中没有子代的最后一个 LI。但是，我是一个 JS 菜鸟，不知道该怎么做。

我对 CSS 或 JavaScript/jQuery 解决方案持开放态度。一段时间以来，我一直在努力解决这个问题，并感谢任何意见或更好的想法。感谢您的帮助!!

--

更新:这是我希望的代码示例:

<ul id="navigation>
  <li>Item one</li>  <!--Style this one-->
  <li>Item Two
    <ul>
      <li>Item Two-One</li>
      <li>Item Two-Two</li>  <!--Style this one-->
    </ul>
  <li>
  <li>Item Three
    <ul>
      <li>Item Three-One</li>
      <li>Item Three-Two
        <ul>
          <li>Item Three-Two-One</li>
          <li>Item Three-Two-One</li>  <!--Style this one-->
        </ul>
      </li>
    </ul>
  <li>
  <li>Item Four
    <ul>
      <li>Item Four-One</li>
      <li>Item Four-Two
        <ul>
          <li>Item Four-Two-One</li>
          <li>Item Four-Two-One</li>
        </ul>
      </li>
      <li>Item Four-Three</li>  <!--Style this one-->
    </ul>
  <li>
</ul>

.last 选择器不起作用的原因是，在上面的示例中，它将样式化元素 Four-Two-One，因为它是其 UL 的最后一个元素。

Answer 1

清理我的答案，以防日后阅读。

here is my solution针对您的问题:

var checkChildren = function($this) {
    if (!$this.children().length) {
        $this.css({
            color: '#f00',
            fontWeight: '700',
            textDecoration: 'underline'
        });
        return false;
    }
    return true;
};
$("#navigation").children("li").each(function() {
    $these = $(this);
    while (checkChildren($these)) {
        $these = $these.children().last() || $these.next();
    }
});