Узнать индекс расположения элемента в родителе

[root-andrey]

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Помогите разобратся.
Зная на каком елементе li произошел клик,как узнать его индекс расположения в родителе.

[walik]

К примеру проходишь циклом по всем элементам, и каждый с кликнутым.

[melky]

на пример

выводит позицию(индекс) кликнутого 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>

[root-andrey]

Спасибо большое за пример!

[Gvozd]

melky,
интересный хак.
Есть ли какие-то противопоказания, по поводу кроссбразуерности?

[float]

ложечка дёгтя :

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

[Octane]

Есть ли какие-то противопоказания, по поводу кроссбразуерности?

Хотел написать, что IE7 выдаст ошибку "Предполагается наличие объекта JScript", по аналогии с Array.prototype.slice.call(nodeList), но потом вспомнил, что в IE7,8 нет Array.prototype.indexOf

[monolithed]

к примеру в jQuery можно так:

$.fn.index.call(this.children, event.target);

[root-andrey]

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

в IE не работает

[nikita.mmf]

<!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>