Question

我有一个使用UL生成基本导航的CMS。每个第一级LI被设计为一个组。我需要将样式应用于每个第一级LI“组”中的最后一个元素。含义;如果第一级LI没有孩子，我想对它应用一种风格（作为该组的“底部”）;如果它确实有孩子，我想找到出现的最后一个孩子或孙子元素（再次，该组的“底部”）。我已经使用了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

我认为这就是你想要的。它是jQuery API的一部分。

http://api.jquery.com/last/

HTML

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

的jQuery

$('li').last().css('background-color', 'red');

编辑：

好的，我找到了一种方法让你这样做..唯一需要注意的是，你需要能够为第一级<li>设置一个类。我在这里发布了我的发现：

http://jsfiddle.net/TTXch/54/

它为每个主要导航元素选择<li>的最后一个。您发布的结构有点偏离...结束标记并不是全部匹配。无论如何，请在jsFiddle的javascript窗口中查看jQuery。

Answer 2

要清理我的答案，请稍后阅读。

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();
    }
});

Answer 3

您应该可以使用jQuery last选择器（http://api.jquery.com/last-selector/）。

找到UL中的最后一个孩子或孙子

3 个答案: