@strelkovandreyv

Как автоматически сгенерировать пейджер на основе древовидного HTML списка?

Добрый день, подскажите пожалуйста, как можно автоматически сгенерировать на странице пейджер (Предыдущий/Следующий материал), на основе имеющегося на странице древовидного списка.
А именно:

<div>
	<ul class="ul-tree-root">
		<li><a href="/node/29">1</a></li>
		<li><a href="/node/30">2</a>
			<ul>
				<li><a href="/node/34">2.1</a>
					<ul>
						<li><a href="/node/37" class="active">2.1.1</a></li>
					</ul>
				</li>
				<li><a href="/node/35">2.2</a></li>
				<li><a href="/node/36">2.3</a></li>
			</ul>
		</li>
		<li><a href="/node/31">3</a></li>
		<li><a href="/node/32">4</a></li>
		<li><a href="/node/33">5</a></li>
	</ul>
</div>
<div class="node">
	<div class="content"></div>
	<div class="pager">
		<div class="previous"></div>
		<div class="next"></div>
	</div>
</div>


Т.е. получается чтобы понять на какой странице я сейчас нахожусь это по классу active можно, а дальше нужно какую то хитрую проверку, которая сначала пойдёт по пути рендерить ссылку на следующий матераиал:
1) сначала она должна проверить есть ли дочерний элемент в данном примере его нет, а если бы он был то она сразу должна взять её как за следующую и уже рендерить и дальше ничего не проверять, т.к. точно известна следующая страница
2) если же дочернего нет элемента, то она должна посмотреть есть ли на этом же уровне вложенности следующий элемент, если он есть то его рендерить
3) если следующего нет, то получается либо подраздел закончился и нужно вернуться к родителю и взять следующий у родителя отрендерив его
4) если же из выше перечисленного нет, то получается мы вообще в самом конце и ничего рендерить не нужно

И по идее по такой же логике только наоборот нужно сделать поиск для кнопки предыдущий материал

Подскажите пожалуйста, как это по уму сделать (к сожалению на уровне бэканда в моей системе я не могу это сделать, только одна надежда на фронтэнд)
Или может уже даже готовая есть вещь для этих дел?

решение для себя на будущее
const links = document.querySelectorAll('li a')
	let active = [...links].findIndex(a => a.matches('.active'))
	
	if (links[active - 1]) {
	  prev = links[active - 1].pathname
	} else {
	  prev = "#";
	}

	if (links[active + 1]) {
	  next = links[active + 1].pathname
	} else {
	  next = "#";
	}

	$("#btnPrev").attr("href", prev)
	$("#btnNext").attr("href", next)
  • Вопрос задан
  • 129 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
если структура как тут, то нафиг дерево, можно обойтись просто списком линков

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы