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

Question

[strelkovandreyv]

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

<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)

Answer 1

[hzzzzl]

если структура как тут, то нафиг дерево, можно обойтись просто списком линков

Comments

[strelkovandreyv]

Ппц вы волшебник!!! =)))
А можно ли сделать так, чтобы просто при загрузке страницы, скрипт просто находил соседа при шагании назад и шагании вперёд и их href вставял соотвественно в нужные кнопки

Т.е. чтобы когда страница загрузилась, нашла в оба направлениях родственника так сказать, и их ссылка подставила в кнопки. И нам это скрипт свою работу выполнил на странице

[hzzzzl]

strelkovandreyv, ну так это

const links = document.querySelectorAll('li a')
let active = [...links].findIndex(a => a.matches('.active'))

// надо проверить что мы не в конце и не в начале списка
prev = links[active - 1].pathname
next = links[active + 1].pathname

[strelkovandreyv]

Огромное спасибо! Очень выручили!