Узнать индекс расположения элемента в родителе
<ul>
<li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> Помогите разобратся. Зная на каком елементе li произошел клик,как узнать его индекс расположения в родителе. |
К примеру проходишь циклом по всем элементам, и каждый с кликнутым.
|
на пример :)
выводит позицию(индекс) кликнутого li в списке ul.. не забываем, что нумерация в программировании начинается с нуля
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
document.getElementsByTagName("ul")[0].onclick = function(e){
alert( [].indexOf.call(this.children, (e ? e.target : event.srcElement) ) );
};
</script>
|
Спасибо большое за пример!
|
melky,
интересный хак. Есть ли какие-то противопоказания, по поводу кроссбразуерности? |
ложечка дёгтя:) :
<ul>
<li>1</li>
<li><span>2</span></li>
<li>3</li>
<li>4</li>
</ul>
<script>
document.getElementsByTagName("ul")[0].onclick = function(e){
alert( [].indexOf.call(this.children, (e ? e.target : event.srcElement) ) );
};
</script>
|
Цитата:
Предполагается наличие объекта JScript", по аналогии с Array.prototype.slice.call(nodeList), но потом вспомнил, что в IE7,8 нет Array.prototype.indexOf :D |
к примеру в jQuery можно так:
$.fn.index.call(this.children, event.target); |
Цитата:
|
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li><i><b>3</b></i></li>
<li>4</li>
</ul>
<script>
document.getElementsByTagName("ul")[0].onclick = function( e ) {
var target = e ? e.target : event.srcElement;
while ( target != this && target.nodeName.toLowerCase() != "li" ) {
target = target.parentNode;
}
if ( target == this ) { return; }
var index = 0;
while ( (target = target.previousSibling) ) {
if ( target.nodeType === 1 ) {
index++;
}
}
alert ( index )
};
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:03. |