@SergeiB

Как сформировать содержание из массива заголовков?

Есть объёмная статья. Задача - собрать все её заголовки и сформировать из них содержание, сохранив при этом иерархическую структуру. Например, у меня будет следующий массив заголовков:
var arr = [h2, h3, h3, h2, h2, h2, h3, h4];
Соответственно должен получиться такой список:
<ul>
  <li>h2
    <ul>
      <li>h3</li>
      <li>h3</li>
    </ul>
  </li>
  <li>h2</li>
  <li>h2</li>
  <li>h2
    <ul>
      <li>h3
        <ul>
          <li>h4</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Буду рад любым подсказкам и идеям. Спасибо.
  • Вопрос задан
  • 100 просмотров
Решения вопроса 2
@h88p
Pre-Junior HTML Developer
var arr2 = ['h2', 'h3', 'h3', 'h2', 'h2', 'h2', 'h3', 'h4'];

function setList(arr) {
	if (arr.length === 0) return '<ul>\n</ul>';
	let fullList = '<ul>\n';
	let ends = [];
	arr.forEach((w,e) => {
		if((arr[e+1]) && (parseInt(w[1]) < parseInt(arr[e+1][1]))){
			fullList += `<li>${w}\n<ul>\n`;
			ends.push('</ul>\n</li>');
		} else if ((arr[e+1]) && (parseInt(w[1]) === parseInt(arr[e+1][1]))) {
			fullList += `<li>${w}</li>\n`;
		} else {
			fullList +=`<li>${w}</li>\n` +  ends.join('\n') + '\n';
			ends = [];
		}
	}) 
	fullList = fullList + '</ul>';
	return fullList;
}
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
function createList(data) {
  const list = document.createElement('ul');

  const stack = [];
  let level = +data[0][1];
  let ul = list;
  for (let i = 0; i < data.length; i++) {
    const currLevel = +data[i][1];
    if (currLevel > level) {
      level = currLevel;
      stack.push(ul);
      const newUl = document.createElement('ul');
      ul.children[ul.children.length - 1].appendChild(newUl);
      ul = newUl;
    } else {
      while (currLevel !== level) {
        level--;
        ul = stack.pop();
      }
    }

    const li = document.createElement('li');
    li.textContent = data[i];
    ul.appendChild(li);
  }

  return list;
}

https://jsfiddle.net/gd9uf2ts/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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