javascript - How to display the first 3 elements in UL only on document load? -

i have list (ul) has class of .more_stories ul contains li.

i use code hide them default on load:

$('ul.more_stories li').css({'display': 'none'});

now want display first 3 li items inside ul after that. how can in jquery?

-note: have several uls same class.

i try , unexpected results..

// more stories $('ul.more_stories li').css({'display': 'none'}); $('ul.more_stories li:gt(2)').show();

thanks in advance.

you want :lt() selector instead, this:

$('ul.more_stories li').hide(); $('ul.more_stories li:lt(3)').show();

or, bit simpler/faster using .slice():

$('ul.more_stories li').hide().slice(0, 2).show();

this approach hides them all, using same set , taking 0-2 index elements show.

you can reverse approach, never hiding first 3, this:

$('ul.more_stories li:gt(2)').hide();

or, again using .slice():

$('ul.more_stories li').slice(3).hide();

for comments, make work across multiple <ul> element, use .each() loop, this:

$('ul.more_stories').each(function() {   $(this).children().slice(3).hide();  });

shell