• 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ą

+1 głos
56 wizyt
pytanie zadane 23 września w JavaScript przez qax Mądrala (6,510 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 przez Wiciorny Mędrzec (187,790 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 przez qax Mądrala (6,510 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 przez adrian17 Ekspert (302,720 p.)
wybrane 23 września 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 przez qax Mądrala (6,510 p.)
Dzięki, działa! To była faktycznie literówka.

Podobne pytania

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

85,871 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,738 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 601p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...