Задать вопрос
@Evgeii
javascript

Как ограничить количество карточек на чистом js?

<div class="wrap">
    <ul>
      <li> Услуги
      </li>
      <li> Услуги
      </li>
      <li> Услуги
      </li>
      <li> Услуги
      </li>
    </ul>
    <a href="#">Еще</a>
  </div>

Подскажите как нибудь можно на чистом js без добавления ul и li классов в html на прямую. Сделать что бы на странице одновременно отображалось только 2 li и при клике на кнопку "Еще" Показывало еще по 2 пока есть li? Все данные только в html коде без загрузки от куда то.
  • Вопрос задан
  • 607 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 4
sergiks
@sergiks Куратор тега JavaScript
♬♬
Без стилей, на чистом JS:
Ответ написан
Комментировать
Комментировать
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей 

<style>
	.wrap li {
		display: none;
	}
</style>
<div class="wrap">
    <ul>
      <li>Услуги1</li>
      <li>Услуги2</li>
      <li>Услуги3</li>
			<li>Услуги4</li>
			<li>Услуги5</li>
			<li>Услуги6</li>
    </ul>
    <a href="#">Еще</a>
</div>


var li = document.querySelectorAll('.wrap li'),
		a = document.querySelector('.wrap a'),
		n = 2;

function showMore(n) {
	for (var i = 0; i < li.length; i++) {
		if (i < n) {
			li[i].style.display = 'block';
			if (n === li.length) a.style.display = 'none';
		} else  {
				break;
		}
	}
}
showMore(n);

a.onclick = function(e) {
	e.preventDefault();
	n += 2;
	showMore(n);
}
Ответ написан
Комментировать
Комментировать
@bogomazov_vadim
По "условиям" задачи.
Ответ написан
Комментировать
Комментировать
@Nc_Soft 
<html>
<body>
<div class="wrap">
    <ul>
        <li>task1</li>
        <li>task2</li>
        <li>task3</li>
        <li>task4</li>
        <li>task5</li>
        <li>task6</li>
    </ul>
    <a href="#">more</a>
</div>
<script>
  let start = 0;
  let limit = 2;

  function render(elements, start, limit) {
    elements.forEach((el, index) => {
      el.style.display = (index < start + limit) ? 'block' : 'none';
    });
  }

  const elements = document.querySelectorAll('ul > li');
  document.querySelectorAll('a')[0].onclick = () => {
    start += limit;
    render(elements, start, limit);
  };

  render(elements, start, limit);
</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@architawr
"Ok, Google" и все твои проблемы решены 
$('.more').on('click', function(e) {
    e.preventDefault();

    $('li')
      .slice(3)
      .toggleClass('hidden');

    if ($('li').hasClass('hidden')) {
      $(this).text('Еще');
    } else {
      $(this).text('Меньше');
    }
  });
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработчик на Python
26 нояб. 2024, в 13:05
450 руб./в час
Верстка магазина на opencart + юкасса
26 нояб. 2024, в 12:58
30000 руб./за проект
Настроить BLE стек на чипе NRF52840
26 нояб. 2024, в 12:56
1500 руб./в час
Ещё заказы