Присвоение уровням многоуровнего меню id соответствующего уровню вложенности
Добрый день!
Есть многоуровневое меню. Элементы и контейнеры элементов меню, каждого вложенного уровня меню, содержат одинаковые классы subsection и subsections соответственно. Уровней вложенности до 7, но возможно будет и больше. Поэтому прошу помочь исправить код, чтобы обрабатывать любой уровень вложенности меню. Мой немного дурно :( пахнущий код: /*Элементы основного меню*/ var d = document.querySelectorAll('.category-list > .one-section.parent'); for(let i=0;i<d.length;i++) { /*Контейнер следующего уровня меню*/ var foo = d[i].getElementsByClassName('subsections')[0]; foo.setAttribute('id','subsections1'); var child_level1 = foo.children; //получаем дочерние элементы следующего уровня меню for(let z=0;z<child_level1.length;z++) { child_level1[z].setAttribute('id','subsection1'); var foo2 = child_level1[z].getElementsByClassName('subsections')[0]; if(foo2 != null) { foo2.setAttribute('id','subsections2'); var child_level2 = foo2.children; for(let a=0;a<child_level2.length;a++) { child_level2[a].setAttribute('id','subsection2'); var foo3 = child_level2[a].getElementsByClassName('subsections')[0]; if(foo3 != null) { foo3.setAttribute('id','subsections3'); var child_level3 = foo3.children; for(let b=0;b<child_level3.length;b++) { child_level3[b].setAttribute('id','subsection3'); var foo4 = child_level3[b].getElementsByClassName('subsections')[0]; if(foo4 != null) { foo4.setAttribute('id','subsections4'); var child_level4 = foo4.children; for(let x=0;x<child_level4.length;x++) { child_level4[x].setAttribute('id','subsection4'); var foo5 = child_level4[x].getElementsByClassName('subsections')[0]; if(foo5 != null) { foo5.setAttribute('id','subsections5'); var child_level5 = foo5.children; for(let y=0;y<child_level5.length;y++) { child_level5[y].setAttribute('id','subsection5'); var foo6 = child_level5[y].getElementsByClassName('subsections')[0]; if(foo6 != null) { foo6.setAttribute('id','subsections6'); var child_level6 = foo6.children; for(let w=0;w<child_level6.length;w++) { child_level6[w].setAttribute('id','subsection6'); var foo7 = child_level6[w].getElementsByClassName('subsections')[0]; if(foo7 != null) { foo7.setAttribute('id','subsections7'); var child_level7 = foo7.children; for(let n=0;n<child_level7.length;n++) { child_level7[n].setAttribute('id','subsection7'); } } } } } } } } } } } } } } Не могу сообразить, как рекурсивно переписать |
А зачем присваивать им ID?
|
чтобы проще было их распарсить на php.
я выполняю js в консоли браузера и результат копирую из инспектора кода для парсинга. Так как у всех уровней вложенности меню, классы контейнеров и элементов меню одинаковы на всех уровнях, а именно subsections и subsection соответственно. При обработке на php происходит мешанина и иерархия пунктов нарушалась. С помощью нумерованных id можно без проблем получить пункты меню с иерархией |
2 варианта: без рекурсии, с рекурсией
function setNodeLevel(node, level) { node.setAttribute('data-level', level); } // без рекурсии: для каждого '.subsections' подсчитываем уровень function setLevels(parent, topLevel) { var s = parent.querySelectorAll('.subsections'); for (var i = 0; i < s.length; ++i) { var subsections = s[i]; var level = topLevel; for (var node = subsections.parentNode; node && node != parent; node = node.parentNode) { if (node.classList.contains('subsections')) { level++; } } setNodeLevel(subsections, level); var children = subsections.children; for (var j = 0; j < children.length; ++j) { setNodeLevel(children[j], level); } } } // с рекурсией function setLevels(parent, topLevel) { var subsections = parent.querySelector('.subsections'); if (!s) { return; } setNodeLevel(subsections, topLevel); var children = subsections.children; for (var j = 0; j < children.length; ++j) { setNodeLevel(children[j], topLevel); setLevels(children[j], topLevel + 1); } } // использование var d = document.querySelectorAll('.category-list > .one-section.parent'); for(let i = 0;i < d.length; i++) { setLevels(d[i], 1); } не дебажил |
Плюсую.
Благодарю от души. Должно было быть if (!subsections) { ? // с рекурсией function setLevels(parent, topLevel) { var subsections = parent.querySelector('.subsections'); if (!s) { return; } |
Цитата:
|
Часовой пояс GMT +3, время: 17:55. |