Присвоение уровням многоуровнего меню id соответствующего уровню вложенности

[ishurgaya]

Добрый день!

Есть многоуровневое меню. Элементы и контейнеры элементов меню, каждого вложенного уровня меню, содержат одинаковые классы 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');
													}
												}
											}
										}
									}
								}
							}
						}
						
					}
				}
					
			}
		}
	}
	
}

Не могу сообразить, как рекурсивно переписать

[laimas]

А зачем присваивать им ID?

[ishurgaya]

чтобы проще было их распарсить на php.
я выполняю js в консоли браузера и результат копирую из инспектора кода для парсинга.

Так как у всех уровней вложенности меню, классы контейнеров и элементов меню одинаковы на всех уровнях, а именно subsections и subsection соответственно.

При обработке на php происходит мешанина и иерархия пунктов нарушалась.
С помощью нумерованных id можно без проблем получить пункты меню с иерархией

[Alexandroppolus]

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);
}

не дебажил

[ishurgaya]

Плюсую.
Благодарю от души.

Должно было быть if (!subsections) { ?

// с рекурсией
function setLevels(parent, topLevel) {
    var subsections = parent.querySelector('.subsections');
    if (!s) {
        return;
    }

[laimas]

чтобы проще было их распарсить на php

Странно, вообще-то не id, а параметр запроса определяет что запрашивается у сервера, и если это меню, значит есть ссылки. А если ссылки, то кто их должен вставлять сервер или клиент? А если север, то меню построено, ссылки с параметрами запроса есть, причем тут id?