Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.03.2015, 12:38
Интересующийся
Отправить личное сообщение для WebBizMedia Посмотреть профиль Найти все сообщения от WebBizMedia
 
Регистрация: 13.01.2015
Сообщений: 11

Помогите с рекурсивной функцией
Второй день голову ломаю, нужно визуализировать для пользователя иерархию DOM, вот что получилось на текущий момент:
function createTreeDoom(objRoot,treeRoot){	 
	var child = objRoot.children();			 
	if(child.length > 0){					
		if(!treeRoot){						
			var wrapTree = $('#layerTree');
			treeRoot = $('<ul/>',{text: objRoot.get(0).tagName+'_'+objRoot.attr('title')}).appendTo(wrapTree);
		}
		$.each(child, function(){
			var newlayer = $('<ul/>',{text: $(this).get(0).tagName+'_'+$(this).attr('title')}).appendTo(treeRoot);
				newlayer.data('obj_id',$(this).attr('id'));
				newlayer.css('margin-left','20px');
				if(child.children().length > 0){
						return createTreeDoom(child,newlayer);
				};
			});	
		};
				
};


Функция должна проходить по DOM-дереву и визуализировать его структуру.
Допустим есть такая структура:
<div class="pages" title="root">
			<div title="div1"></div>
			<div title="div2">
				<div title="div4">
					<div title="div6"></div>
					<div title="div7"></div>
				</div>
				<div title="div5"></div>
			</div>
			<div title="div3"></div>
		</div>


Но на выходе получаю не совсем что нужно:

DIV_root
DIV_div1
DIV_div4
DIV_div6
DIV_div7
DIV_div5
DIV_div6
DIV_div7
DIV_div2
DIV_div4
DIV_div6
DIV_div7
DIV_div5
DIV_div6
DIV_div7
DIV_div3
DIV_div4
DIV_div6
DIV_div7
DIV_div5
DIV_div6
DIV_div7
Ответить с цитированием
  #2 (permalink)  
Старый 27.03.2015, 12:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

WebBizMedia,
сюда бы рекурсивный итератор прикрутить --- мысли вслух
Ответить с цитированием
  #3 (permalink)  
Старый 27.03.2015, 13:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от рони Посмотреть сообщение
WebBizMedia,
сюда бы рекурсивный итератор прикрутить --- мысли вслух
На одном из форумов была задача проверки сервером html, которую клиент мог использовать в сообщении. Нужно было проверять и вложенность и целостность.

Рекурсия при этом не обязательна, главное это правила, а проход циклом с использованием массива в качестве стека - первым вошел, последним вышел.

Там я писал на РНР, получая элементы с помощью рег. выражений, а на клиенте они уже есть как коллекция.
Ответить с цитированием
  #4 (permalink)  
Старый 27.03.2015, 14:01
Интересующийся
Отправить личное сообщение для WebBizMedia Посмотреть профиль Найти все сообщения от WebBizMedia
 
Регистрация: 13.01.2015
Сообщений: 11

Сообщение от laimas Посмотреть сообщение
На одном из форумов была задача проверки сервером html, которую клиент мог использовать в сообщении. Нужно было проверять и вложенность и целостность.

Рекурсия при этом не обязательна, главное это правила, а проход циклом с использованием массива в качестве стека - первым вошел, последним вышел.

Там я писал на РНР, получая элементы с помощью рег. выражений, а на клиенте они уже есть как коллекция.
laimas, а можно пример хотябы и на РНР
Ответить с цитированием
  #5 (permalink)  
Старый 27.03.2015, 14:43
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Не зачем, хотя если не будет понятно, тогда приведу его. Единственная оговорка, это будем считать в данном случае html-код валидный на 100%.

Как работает - будем помещать в массив (push) открывающий тег каждой ветви дерева, и извлекая его из стека (pop), если следующий тег закрывающий и его имя равно тегу в вершине стека (ради производительности работаем с последним элементом массива). То есть получается имитация стека LIFO - последним пришел, первым вышел.

Ну и немного на примере вашего кода, как итерации цикла и действия, которые будут осуществляться в них:

1) Первый тег открывающий - заносим в стек
2) опять открывающий тег - заносим в стек
3) тег закрывающий, его имя равно тегу в вершине стека - извлекаем из стека, в стеке остался первый открывающий тег
4) открывающий тег - заносим в стек
5) открывающий тег - заносим в стек
6) открывающий тег - заносим в стек
7) тег закрывающий, его имя равно тегу в вершине стека - извлекаем из стека, в стеке остались открывающие теги (root, div1, div2, div4)

и т.д. То есть для дерева из тегов div все просто. Но если дерево содержит еще и теги, которые не имеют закрывающих, то надо еще иметь описание правил, то есть нужно еще иметь набор имен таких тегов, и не заносить их в стек.

Последний раз редактировалось laimas, 27.03.2015 в 14:47.
Ответить с цитированием
  #6 (permalink)  
Старый 27.03.2015, 15:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

У меня клава беспроводная, батарейки уже не тянут, глючит, дважды пропало писанное, поэтому сохранил, а это продолжение.

То что описал ранее, так работает на сервере, так как нужно проверять структуру кода и вложений. На клиенте разница будет в том, что нужно проверять не закрывающий тег, а наличие вложения, то есть в каждой ветви дерева - если нет вложения у элемента, значит в стек не заносим, если есть, то тег родителя помещаем в стек.
Ответить с цитированием
  #7 (permalink)  
Старый 27.03.2015, 15:53
Интересующийся
Отправить личное сообщение для WebBizMedia Посмотреть профиль Найти все сообщения от WebBizMedia
 
Регистрация: 13.01.2015
Сообщений: 11

laimas, за уделённое внимание спасибо, но у меня похоже уже мозг перегрелся и я нечего не понял ((
Ответить с цитированием
  #8 (permalink)  
Старый 27.03.2015, 16:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Ну если не понятна сама суть, то и php-код показывать нет смысла.
Идея в том, что для контроля уровня вложения используется стек, его вершина - она растет при погружении в глубину вложения, и убывает при возврате назад. Для вашей задачи вершина стека и указывает на текущего родителя. Такое решение позволяет обойтись без рекурсии.

А не понятно, значит делайте рекурсивным обходом.
Ответить с цитированием
  #9 (permalink)  
Старый 27.03.2015, 16:17
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от рони
сюда бы рекурсивный итератор прикрутить --- мысли вслух
примерно так http://jsfiddle.net/929906h3/6/
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #10 (permalink)  
Старый 27.03.2015, 19:02
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от WebBizMedia
нужно визуализировать для пользователя иерархию DOM
http://jsfiddle.net/vlasenkofedor/d6nyD/

Последний раз редактировалось Vlasenko Fedor, 27.03.2015 в 19:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией из dataTable kyt Работа 5 16.12.2014 21:38
Помогите с функцией error ajax Evhen AJAX и COMET 2 13.12.2013 11:17
style.display помогите с функцией alma95 Javascript под браузер 6 07.08.2012 19:09
Помогите с Функцией lublupospat AJAX и COMET 4 18.03.2012 19:42
Помогите с функцией, таймер enterwap Элементы интерфейса 6 07.05.2009 23:40