Funkcja przeredagowująca listę uporządkowaną

Question

Mam nietypowy problem do rozwiązania, nad którym siedzę parę godzin i nie mogę niczego wymyśleć. Chciałbym za pomocą JS wygenerować listę uporządkowaną, ale posiadając jedynie wiedzę o jej kolejności elementów oraz poziomów ich zagnieżdżeń. Aktualnie moja aplikacja tworzy następujący model DOM, gdzie data-indentation to poziom zagnieżdżenia, a data-position to numer pozycji:

<ol data-indentation="0" data-position="0"><li></li></ol>
	<ol data-indentation="1" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="2"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="3"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
<ol data-indentation="0" data-position="1"><li></li></ol>
	<ol data-indentation="1" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="2"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="3"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
		<ol data-indentation="0" data-position="1"><li></li></ol>
<ol data-indentation="0" data-position="2"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="2"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>
	<ol data-indentation="1" data-position="3"><li></li></ol>
		<ol data-indentation="2" data-position="0"><li></li></ol>
		<ol data-indentation="2" data-position="1"><li></li></ol>
		<ol data-indentation="2" data-position="2"><li></li></ol>

Pytanie brzmi jaką wykonać pętlę, aby zbudować drzewo wg poniższej formy:

<ol>
	<li>1.
		<ol>
			<li>1.1.
				<ol>
					<li>1.1.1.</li>
					<li>1.1.2.</li>
					<li>1.1.3.</li>
				</ol>
			</li>
			<li>1.2.
				<ol>
					<li>1.2.1.</li>
					<li>1.2.2.</li>
					<li>1.2.3.</li>
				</ol>
			</li>
			<li>1.3.
				<ol>
					<li>1.3.1.</li>
					<li>1.3.2.</li>
					<li>1.3.3.</li>
				</ol>
			</li>
			<li>1.4.
				<ol>
					<li>1.4.1.</li>
					<li>1.4.2.</li>
					<li>1.4.3.</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>2.
		<ol>
			<li>2.1.
				<ol>
					<li>2.1.1.</li>
					<li>2.1.2.</li>
					<li>2.1.3.</li>
				</ol>
			</li>
			<li>2.2.
				<ol>
					<li>2.2.1.</li>
					<li>2.2.2.</li>
					<li>2.2.3.</li>
				</ol>
			</li>
			<li>2.3.
				<ol>
					<li>2.3.1.</li>
					<li>2.3.2.</li>
					<li>2.3.3.</li>
				</ol>
			</li>
			<li>2.4.
				<ol>
					<li>2.4.1.</li>
					<li>2.4.2.</li>
					<li>2.4.3.</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>3.
		<ol>
			<li>3.1.
				<ol>
					<li>3.1.1.</li>
					<li>3.1.2.</li>
					<li>3.1.3.</li>
				</ol>
			</li>
			<li>3.2.
				<ol>
					<li>3.2.1.</li>
					<li>3.2.2.</li>
					<li>3.2.3.</li>
				</ol>
			</li>
			<li>3.3.
				<ol>
					<li>3.3.1.</li>
					<li>3.3.2.</li>
					<li>3.3.3.</li>
				</ol>
			</li>
			<li>3.4.
				<ol>
					<li>3.4.1.</li>
					<li>3.4.2.</li>
					<li>3.4.3.</li>
				</ol>
			</li>
		</ol>
	</li>
</ol>

Z góry dzięki za poświęcony wysiłek umysłowy. 

Comments

A możę generowanie "poziomów i zagnieżdżęń" przechowywać w mapie-dictionary?
KLUCZ->WARTOŚĆ poziomy pewnie bedą kluczem np a zagnieżdzone elementy wartośćiami na poziomie. ?

---

Dzięki za podpowiedź, przyjrzę się temu. Narazie mój mózg jest jak po imprezie i nie mogę tego ogarnąć - w razie problemów będę się pytać.

Answer 1

Zakładając że ta lista jest wewnętrznie spójna i posortowana (w sensie że nie ma czegoś takiego jak w Twoim przykładzie pod koniec tutaj

        <ol data-indentation="0" data-position="1"><li></li></ol>
<ol data-indentation="0" data-position="2"><li></li></ol>
        <ol data-indentation="2" data-position="0"><li></li></ol>

, bo to raczej wiele sensu nie ma, więc zakładam że to literówka), to można to wygenerować jedną iteracją z poruszaniem się po DOMie jak po stosie; przykład z uproszczonym kodem, który generuje oczekiwany DOM:

https://jsfiddle.net/gehavmd5/

 

Comments

Dzięki, działa! To była faktycznie literówka.