Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.05.2019, 10:34
Интересующийся
Отправить личное сообщение для ishurgaya Посмотреть профиль Найти все сообщения от ishurgaya
 
Регистрация: 12.08.2015
Сообщений: 26

Присвоение уровням многоуровнего меню 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');
													}
												}
											}
										}
									}
								}
							}
						}
						
					}
				}
					
			}
		}
	}
	
}


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

Последний раз редактировалось ishurgaya, 19.05.2019 в 10:48.
Ответить с цитированием
  #2 (permalink)  
Старый 19.05.2019, 11:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,482

А зачем присваивать им ID?
Ответить с цитированием
  #3 (permalink)  
Старый 19.05.2019, 11:48
Интересующийся
Отправить личное сообщение для ishurgaya Посмотреть профиль Найти все сообщения от ishurgaya
 
Регистрация: 12.08.2015
Сообщений: 26

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

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

При обработке на php происходит мешанина и иерархия пунктов нарушалась.
С помощью нумерованных id можно без проблем получить пункты меню с иерархией
Ответить с цитированием
  #4 (permalink)  
Старый 19.05.2019, 14:02
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 670

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


не дебажил
Ответить с цитированием
  #5 (permalink)  
Старый 19.05.2019, 16:00
Интересующийся
Отправить личное сообщение для ishurgaya Посмотреть профиль Найти все сообщения от ishurgaya
 
Регистрация: 12.08.2015
Сообщений: 26

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

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

// с рекурсией
function setLevels(parent, topLevel) {
    var subsections = parent.querySelector('.subsections');
    if (!s) {
        return;
    }
Ответить с цитированием
  #6 (permalink)  
Старый 19.05.2019, 16:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,482

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover jquery SolomonRei Элементы интерфейса 0 27.11.2018 16:41
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 14:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 19:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 13:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 13:36