Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.05.2011, 10:15
Аспирант
Отправить личное сообщение для evgh Посмотреть профиль Найти все сообщения от evgh
 
Регистрация: 29.01.2011
Сообщений: 58

рекурсивный обход меню
Доброго времени суток.
Требуется обойти древовидное меню, подскажите как исправить, а то в ступор зашёл.
Функция доходит до самых младших потомков (узлов), обрабатывает их, некоторых почему-то дважды, и помирает.
Как исправить не знаю

<div id="first">
<ul id="editor">
<li>1
    <ul>
        <li>11</li>
        <li>12</li>
        <li>13
            <ul>
                <li>131</li>
                <li>132</li>
                <li>133</li>
            </ul>
        </li>
        <li>14</li>
    </ul>
</li>
<li>2
    <ul>
        <li>21</li>
        <li>22</li>
        <li>23</li>
    </ul>
</li>
<li>3</li>
<li>4</li>
</ul>
</div>

function Next(n) {
    if(n.getElementsByTagName('li').length > 0) return n;
}
function rec(ul)
{
    if(ul.getElementsByTagName('ul').length > 0)
    {
        el=ul.getElementsByTagName('ul')[0].childNodes;
        if( el.length > 0 )
        {
            for(var i=0; i < el.length; i++)
            {
                if(el[i].nodeType != 3)
                {
                    alert( el[i].innerHTML );
                    if(Next(el[i])) rec( el[i] );
                }
            }
        }
    }
}
rec(document.getElementById('first'));


P.S. желательно без библиотек
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2011, 10:50
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Могу предложить такой вариант
<script type = "text/javascript">
window.onload = function(){		
		
function hasSubs(li){
	var subs = [];
	for(var i = 0, il = li.childNodes.length; i < il; i ++){
		if(li.childNodes[i].nodeName == "UL"){
			subs[subs.length] = li.childNodes[i];
		}
	}
	return subs;
}
		
function isLI(node){
	return node.nodeName == "LI";
}
		
function count(ul){
	var childs = ul.childNodes;
	for(var i = 0, il = childs.length; i < il; i ++){
		if(isLI(childs[i])){
			var subs = hasSubs(childs[i]);
			if(subs.length){
				for(var j = 0, jl = subs.length; j < jl; j ++){
					count(subs[j]);
				}
			}else{
				alert("item" + childs[i].innerHTML);
			}		
		}
	}			
}

var outer = document.getElementById("menu");	
count(outer);
}
</script>

<ul id = "menu">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>
		<ul>
			<li>4.1</li>
			<li>4.2</li>
			<li>4.3</li>
			<li>
				<ul>
					<li>4.4.1</li>
					<li>4.4.2</li>
					<li>4.4.3</li>
					<li>4.4.4</li>
				</ul>
			
			</li>
		</ul>
	</li>
	<li>5</li>
</ul>
__________________
readOnly
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2011, 11:05
Аспирант
Отправить личное сообщение для evgh Посмотреть профиль Найти все сообщения от evgh
 
Регистрация: 29.01.2011
Сообщений: 58

на первый взгляд работает, но пункты "4" и "4.4" (которые ты специально не вписал ) не обрабатывает))

кое что интересное подчеркнул для себя

Последний раз редактировалось evgh, 07.05.2011 в 11:16.
Ответить с цитированием
  #4 (permalink)  
Старый 07.05.2011, 11:20
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Все работает ровно так как я хотел) совокупность вложенныx 4.x пунктов и образуют пункт 4, мoй вариант обрабоатывет li без дочерних ul, если нужно отображать таки корневой пункт 4, то я бы перед списком ul с дочерними меню вставил div скажем
Сообщение от evgh
<li>1
    <ul>
        <li>11</li>
        <li>12</li>
        <li>13
Потому что я перемещаюсь по узлам элементов, а у вас например, первой строке приведенной мной цитаты пункт 1 это просто textNode, то есть он не выделен.. даже не знаю как сказать, если нужны корневые элементы, то я б лучше вот так сделал
<ul id = "menu">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>
		<ul>
			<li>4.1</li>
			<li>4.2</li>
			<li>4.3</li>
			<li>4.4</li>
			<li>
				<ul>
					<li>4.4.1</li>
					<li>4.4.2</li>
					<li>4.4.3</li>
					<li>4.4.4</li>
				</ul>
			
			</li>
		</ul>
	</li>
	<li>5</li>
</ul>

И тогда все будет работать ок
__________________
readOnly
Ответить с цитированием
  #5 (permalink)  
Старый 07.05.2011, 11:25
Аспирант
Отправить личное сообщение для evgh Посмотреть профиль Найти все сообщения от evgh
 
Регистрация: 29.01.2011
Сообщений: 58

poorking,
спасибо что отозвались, вопрос решён, указали на мою ошибку.
http://forum.vingrad.ru/forum/topic-...2342178/0.html
Ответить с цитированием
  #6 (permalink)  
Старый 07.05.2011, 11:27
Аспирант
Отправить личное сообщение для evgh Посмотреть профиль Найти все сообщения от evgh
 
Регистрация: 29.01.2011
Сообщений: 58

Сообщение от poorking Посмотреть сообщение
...то я бы перед списком ul с дочерними меню вставил div ...
не валидно получится
Ответить с цитированием
  #7 (permalink)  
Старый 07.05.2011, 11:30
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Сообщение от evgh
не валидно получится
Почему не валидно? все элементы блочные.
<li>
  <div>пункт 4</div>
  <ul>
     <li>Пункт 4.1</li>
     <li>Пункт 4.2</li>
     <li>Пункт 4.3</li>
  </ul>
</li>


Или что, валидатор разрешает в li только ul из блочных помещать?
__________________
readOnly

Последний раз редактировалось poorking, 07.05.2011 в 11:42.
Ответить с цитированием
  #8 (permalink)  
Старый 07.05.2011, 11:42
Аспирант
Отправить личное сообщение для evgh Посмотреть профиль Найти все сообщения от evgh
 
Регистрация: 29.01.2011
Сообщений: 58

точно. вы правы. глупость сказал
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 17:50
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05