Ограничение количества отображаемых элементов списка (jQuery)

Если вам необходимо отображать список элементов (например новостей) и вы не знаете из скольки элементов он может состоять, но хотели бы, чтобы он не занимал много места, то неплохим вариантом будет отображать определенное количество элементов и ссылку «показать все»:

<!DOCTYPE html>
<html>
<head>
<="http://.jquery.com/jquery-latest."></script>
<style>

</style>
</head>
<body>

<div class="news">Первая новость</div>
<div class="news">Вторая новость</div>
<div class="news">Третья новость</div>
<div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>

<script>
var news = 2; // — количество отображаемых новостей
hidenews = «- скрыть старые новости»;
shownews = «+ показать все новости»;

$(«.archive»).html ( shownews );
$(«.news:not (:lt („+news+“))»).hide ();

$(«.archive»).click ( (e){
e.preventDefault ();
if ( $(«.news:eq („+news+“)»).is («:hidden») )
{
$(«.news:hidden»).show ();
$(«.archive»).html ( hidenews );
}
else
{
$(«.news:not (:lt („+news+“))»).hide ();
$(«.archive»).html ( shownews );
}
});
</script>
</body>
</html>

Запись навигация

Top