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

次のようにする必要があります。

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

:lastコレクションの最後のものだけを取得する特別な jQuery セレクターです。

Answer 2

を使用したadeneoの回答に加えて、代替および拡張バージョンeach()

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