仅显示每个范围中类的最后一个元素

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.foo元素中的最后一个li。

Answer 1

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

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

FIDDLE

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

Answer 2

你需要这样做：

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

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

Answer 3

另类＆amp;除了使用each()

的adeneo答案之外的扩展版本

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