jquery - 仅显示每个范围内类的最后一个元素

Question

假设我有以下 HTML 布局：

ul
  li
    div.foo
    div.foo
    div.foo
    div.bar  
  li
    div.foo
    div.foo
    div.foo
    div.foo
    div.foo
  li
    div.foo
    div.foo

CSS 看起来像这样：

.foo {display: none;}

我希望每个元素中的最后一个元素li是display: block;.

目前，我有：

$('li .foo:last').show();

但这只是显示每个元素div.foo中的最后一个而不是最后一个。div.fooli

Answer 1

使用.foo:last每个上下文都li应该这样做：

$('.foo:last', 'li').show();

小提琴

以上只是 的快捷方式$('li').find('.foo:last')，甚至更冗长$('li').find('.foo').filter(':last')

Answer 2

你需要这样做：

$('li .foo:last-child').show();

:last是一个特殊的 jQuery 选择器，它只获取集合中的最后一个。

Answer 3

除了使用 adeneo 的答案之外的替代和扩展版本each()

$('li').each(function() {
  $(this).find('div.foo:last').show();
});