Вывод порядкового номера 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) а его порядковый номер в его родителе. Надеюсь я понятно написал ) Долго думал над решением,но по нехватке опыта не могу покаместь ничего толкового придумать. Выкладывать изыски свои не стал :) Прошу хотя бы натолкнуть на правильную мысль,в каком направлении копать. Спасибо. |
Можно использовать свойство .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>
А с опытом научишься делать нормально:) |
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;
};
|
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>
|
Всем большое спасибо! Буду разбираться в принципе работы,я думал что через делегирование - лучший вариант,но не догадался как реализовать. Еще раз спасибо.
|
| Часовой пояс GMT +3, время: 18:40. |