Форум

profxhtml · #1 (**permalink**) 12.04.2011, 19:10

Здавствуйте.
Учу 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) а его порядковый номер в его родителе.
Надеюсь я понятно написал )
Долго думал над решением,но по нехватке опыта не могу покаместь ничего толкового придумать. Выкладывать изыски свои не стал

Прошу хотя бы натолкнуть на правильную мысль,в каком направлении копать.
Спасибо.

Sweet · #2 (**permalink**) 12.04.2011, 19:43

Можно использовать свойство .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>

А с опытом научишься делать нормально

monolithed · #3 (**permalink**) 12.04.2011, 20:43

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

рони · #4 (**permalink**) 13.04.2011, 01:51

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>

profxhtml · #5 (**permalink**) 13.04.2011, 12:30

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

Форум

Справочник

Discord чат

Курсы javascript