jquery - Displaying just the last element of a class in each scope -

let's have following html layout:

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 

the css looks this:

.foo {display: none;} 

i have last element in each li display: block;.

currently, have :

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

but displays last div.foo instead of last div.foo in each li element.

using .foo:last context each li should :

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

fiddle

the above shortcut $('li').find('.foo:last'), or more verbose $('li').find('.foo').filter(':last')