• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Funkcja przeredagowująca listę uporządkowaną

VPS Starter Arubacloud
+1 głos
141 wizyt
pytanie zadane 23 września 2021 w JavaScript przez qax Dyskutant (8,060 p.)

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. smiley

komentarz 23 września 2021 przez Wiciorny Ekspert (269,120 p.)
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. ?
komentarz 23 września 2021 przez qax Dyskutant (8,060 p.)
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ć.

1 odpowiedź

+3 głosów
odpowiedź 23 września 2021 przez adrian17 Ekspert (344,100 p.)
wybrane 23 września 2021 przez qax
 
Najlepsza

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/

 

1
komentarz 23 września 2021 przez qax Dyskutant (8,060 p.)
Dzięki, działa! To była faktycznie literówka.

Podobne pytania

0 głosów
2 odpowiedzi 198 wizyt
pytanie zadane 21 lutego 2016 w HTML i CSS przez AviS98 Początkujący (360 p.)
+1 głos
1 odpowiedź 306 wizyt
0 głosów
1 odpowiedź 298 wizyt
pytanie zadane 23 marca 2020 w HTML i CSS przez Kostkovsky Nowicjusz (120 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...