Javascript.RU

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

Вывод порядкового номера li в списке
Здавствуйте.
Учу javascript и задался вопросом получения порядкового номера li при клике. Есть код.
<div id="main">
		<div class="holder">
			<ul class="list" id="list">
				<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>	
				</li>
				<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>
				</li>
				<li>text text text</li>
			</ul>
			<ul class="list">
				<li>text text text</li>
				<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

И начальный javascript(писал я)
<script type="text/javascript">
	var holder = document.getElementById('main');
	var massUl = holder.getElementsByTagName('ul');
	for(var i = 0;i < massUl.length;i++) //Массив Ul.
	{
		var massLi2 = massUl[i].getElementsByTagName('li');
		for(var k = 0;k < massLi2.length;k++)
		{
			massLi2[k].onclick = function(e)
			{
				return function()
				{
					alert(e);
				}
			}(k)
		}
	}
		
</script>

Задача - получить порядковый номер li от 0 до N по порядку в основном родтельском ul и так же в дочерних ul. Тоесть чтобы при клике на li основного родителя,который идет после li с вложенным ul, выводилось не 6(с учетом ul>ul>li) а его порядковый номер в его родителе.
Надеюсь я понятно написал )
Долго думал над решением,но по нехватке опыта не могу покаместь ничего толкового придумать. Выкладывать изыски свои не стал Прошу хотя бы натолкнуть на правильную мысль,в каком направлении копать.
Спасибо.

Последний раз редактировалось profxhtml, 12.04.2011 в 19:25.
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2011, 19:43
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Можно использовать свойство .children:
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
document.getElementsByTagName('ul')[0].onclick = function(event){
  event = event || window.event;
  var target = event.target || event.srcElement;
  for(var i = 0, l = this.children.length; i < l; i++)
    if( this.children[i] === target ){
      alert(i);
      break;
    };
};
</script>
А с опытом научишься делать нормально
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2011, 20:43
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Sweet, кстати это свойство не поддерживается в FF<=3

Но его можно реализовать в виде метода child():
var child = children ? function(node) {
    return node.children;
} : function(node) {
    var list = node.childNodes,
    length = list.length, i = -1,
    array = [];
    while(++i < length) {
        if(list[i].nodeType == 1) {
            array[i] = list[i];
        }
     }
    return array;
};

Последний раз редактировалось monolithed, 12.04.2011 в 21:06.
Ответить с цитированием
  #4 (permalink)  
Старый 13.04.2011, 01:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

profxhtml,
Вариант
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="main">
		<div class="holder">
			<ul class="list" id="list">
            	<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>
				</li>
				<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>
				</li>
				<li>text text text</li>
			</ul>
			<ul class="list">
				<li>text text text</li>
				<li>text text text</li>
				<li>
					text text text
					<ul>
						<li>text text text</li>
						<li>text text text</li>
						<li>text text text</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
<script>
document.getElementById("main").onclick = function (a) {
    var a = a || window.event,
        a = a.target || a.srcElement,
        b = a.parentNode;
    if (a.nodeName.toLowerCase() == "li" && b.nodeName.toLowerCase() == "ul") {
        for (var c = 0, a = a.previousSibling; a && a != b;)
        a.nodeName.toLowerCase() == "li" && c++, a = a.previousSibling;
        alert(c)
    }
};
</script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 13.04.2011, 12:30
Новичок на форуме
Отправить личное сообщение для profxhtml Посмотреть профиль Найти все сообщения от profxhtml
 
Регистрация: 05.02.2011
Сообщений: 3

Всем большое спасибо! Буду разбираться в принципе работы,я думал что через делегирование - лучший вариант,но не догадался как реализовать. Еще раз спасибо.
Ответить с цитированием
Ответ



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

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